Bileşen şablonuna property binding ekleyin

Bu eğitim dersi, bir şablona özellik bağlama eklemeyi ve bileşenlere dinamik veri aktarmak için nasıl kullanılacağını gösterir.

Neler öğreneceksiniz

• Uygulamanızın Home şablonunda veri bağlamaları vardır.
• Uygulamanız Home'dan HousingLocation'a veri gönderir.

Input'ların kavramsal önizlemesi

Bu derste, şablondaki özelliklere özellik bağlama kullanarak veri bağlayarak, üst bileşenden alt bileşene veri paylaşma sürecine devam edeceksiniz.

Özellik bağlama, bir değişkeni Angular şablonundaki bir Input'a bağlamanızı sağlar. Veriler daha sonra Input'a dinamik olarak bağlanır.

Daha ayrıntılı bir açıklama için lütfen Özellik bağlama kılavuzuna bakın.

1. Home şablonunu güncelleyin

   Bu adım, <app-housing-location> etiketine özellik bağlama ekler.

   Kod editöründe:

   1. src/app/home/home.ts dosyasına gidin

   2. @Component dekoratörünün template özelliğinde, kodu aşağıdaki kodla eşleşecek şekilde güncelleyin:

      Add housingLocation property binding

      import {Component} from '@angular/core';
      import {HousingLocation} from '../housing-location/housing-location';
      import {HousingLocationInfo} from '../housinglocation';
      
      @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 [housingLocation]="housingLocation" />
          </section>
        `,
        styleUrls: ['./home.css'],
      })
      export class Home {
        readonly baseUrl = 'https://angular.dev/assets/images/tutorials/common';
      
        housingLocation: HousingLocationInfo = {
          id: 9999,
          name: 'Test Home',
          city: 'Test city',
          state: 'ST',
          photo: `${this.baseUrl}/example-house.jpg`,
          availableUnits: 99,
          wifi: true,
          laundry: false,
        };
      }
      

      Bir bileşen etiketine özellik bağlama eklerken, atanan değerin bir dize değeri değil, bileşen sınıfından bir özellik olarak ele alınması gerektiğini Angular'a bildirmek için [attribute] = "value" sözdizimini kullanırız.

      Sağ taraftaki değer, Home bileşeninden gelen özelliğin adıdır.

2. Kodun hâlâ çalıştığını doğrulayın

   1. Değişikliklerinizi kaydedin ve uygulamanın herhangi bir hatası olmadığını doğrulayın.
   2. Bir sonraki adıma geçmeden önce tüm hataları düzeltin.

Bu derste ele alınan konular hakkında daha fazla bilgi için: