Uygulamanın HousingLocation bileşenini oluşturun

Bu eğitim dersi, Angular uygulamanıza HousingLocation bileşeninin nasıl ekleneceğini gösterir.

Neler öğreneceksiniz

• Uygulamanızda yeni bir bileşen var: HousingLocation ve bileşenin uygulamanıza eklendiğini doğrulayan bir mesaj görüntüler.

1. HousingLocation bileşenini oluşturun

   Bu adımda, uygulamanız için yeni bir bileşen oluşturursunuz.

   IDE'nizin Terminal bölmesinde:

   1. Proje dizininizde, first-app dizinine gidin.

   2. Yeni bir HousingLocation bileşeni oluşturmak için bu komutu çalıştırın

      ng generate component housingLocation

   3. Uygulamanızı derlemek ve sunmak için bu komutu çalıştırın.

      ng serve

      NOTE: Bu adım yalnızca yerel ortamınız içindir!

   4. Bir tarayıcı açın ve uygulamayı bulmak için http://localhost:4200 adresine gidin.

   5. Uygulamanın hatasız derlendiğini doğrulayın.

      HELPFUL: Yeni bir bileşen eklemiş olsanız bile, henüz uygulamanın şablonlarından hiçbirine dahil etmediğiniz için önceki dersteki gibi görünmesi gerekir.

   6. Sonraki adımları tamamlarken ng serve komutunu çalışır durumda bırakın.

2. Yeni bileşeni uygulamanızın düzenine ekleyin

   Bu adımda, yeni bileşen HousingLocation'ı uygulamanızın Home bileşenine eklersiniz, böylece uygulamanızın düzeninde görüntülenir.

   IDE'nizin Edit bölmesinde:

   1. Editörde home.ts dosyasını açın.

   2. home.ts dosyasında, bu satırı dosya düzeyindeki import'lara ekleyerek HousingLocation'ı içe aktarın.

      Import HousingLocation in src/app/home/home.ts

      import {Component} from '@angular/core';
      import {HousingLocation} from '../housing-location/housing-location';
      
      @Component({
        selector: 'app-home',
        imports: [HousingLocation],
        template: `
          <section>
            <form>
              <input type="text" placeholder="Filter by city" />
              <button class="primary" type="button">Search</button>
            </form>
          </section>
          <section class="results">
            <app-housing-location />
          </section>
        `,
        styleUrls: ['./home.css'],
      })
      export class Home {}
      

   3. Ardından @Component meta verilerinin imports özelliğini, diziye HousingLocation ekleyerek güncelleyin.

      Add HousingLocation to imports array in src/app/home/home.ts

      import {Component} from '@angular/core';
      import {HousingLocation} from '../housing-location/housing-location';
      
      @Component({
        selector: 'app-home',
        imports: [HousingLocation],
        template: `
          <section>
            <form>
              <input type="text" placeholder="Filter by city" />
              <button class="primary" type="button">Search</button>
            </form>
          </section>
          <section class="results">
            <app-housing-location />
          </section>
        `,
        styleUrls: ['./home.css'],
      })
      export class Home {}
      

   4. Artık bileşen, Home şablonunda kullanıma hazırdır. @Component meta verilerinin template özelliğini, <app-housing-location> etiketine bir referans içerecek şekilde güncelleyin.

      Add housing location to the component template in src/app/home/home.ts

      import {Component} from '@angular/core';
      import {HousingLocation} from '../housing-location/housing-location';
      
      @Component({
        selector: 'app-home',
        imports: [HousingLocation],
        template: `
          <section>
            <form>
              <input type="text" placeholder="Filter by city" />
              <button class="primary" type="button">Search</button>
            </form>
          </section>
          <section class="results">
            <app-housing-location />
          </section>
        `,
        styleUrls: ['./home.css'],
      })
      export class Home {}
      

3. Bileşen için stilleri ekleyin

   Bu adımda, uygulamanızın düzgün görüntülenmesi için HousingLocation bileşeninin önceden yazılmış stillerini uygulamanıza kopyalayacaksınız.

   1. src/app/housing-location/housing-location.css dosyasını açın ve aşağıdaki stilleri dosyaya yapıştırın:

      NOTE: Tarayıcıda, bunlar src/app/housing-location/housing-location.ts dosyasındaki styles dizisine eklenebilir.

      Add CSS styles to housing location to the component in src/app/housing-location/housing-location.css

      .listing {
        background: var(--accent-color);
        border-radius: 30px;
        padding-bottom: 30px;
      }
      .listing-heading {
        color: var(--primary-color);
        padding: 10px 20px 0 20px;
      }
      .listing-photo {
        height: 250px;
        width: 100%;
        object-fit: cover;
        border-radius: 30px 30px 0 0;
      }
      .listing-location {
        padding: 10px 20px 20px 20px;
      }
      .listing-location::before {
        content: url('/public/location-pin.svg') / '';
      }
      
      section.listing a {
        padding-left: 20px;
        text-decoration: none;
        color: var(--primary-color);
      }
      section.listing a::after {
        content: '\203A';
        margin-left: 5px;
      }
      

   2. Kodunuzu kaydedin, tarayıcıya dönün ve uygulamanın hatasız derlendiğini doğrulayın. Ekranda "housing-location works!" mesajının görüntülendiğini görmelisiniz. Bir sonraki adıma geçmeden önce tüm hataları düzeltin.