Text Interpolation

Değerleri interpolation ile görüntüleme #

Interpolation, ifadelerin işaretlenmiş metne gömülmesi anlamına gelir. Varsayılan olarak, interpolation sınırlayıcı olarak {{ ve }} çift küme parantezlerini kullanır.

Interpolation yapısının nasıl çalıştığını göstermek için currentCustomer değişkenini içeren bir Angular bileşeni düşünün:

import {Component} from '@angular/core';
import {NgFor} from '@angular/common';
import {CUSTOMERS} from './customers';
@Component({
  standalone: true,
  selector: 'app-root',
  templateUrl: './app.component.html',
  imports: [NgFor],
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  customers = CUSTOMERS;
  currentCustomer = 'Maria';
  title = 'Featured product:';
  itemImageUrl = '../assets/potted-plant.svg';
  recommended = 'You might also like:';
  itemImageUrl2 = '../assets/lamp.svg';
  getVal(): number {
    return 2;
  }
}

Bu değişkenin değerini ilgili bileşen şablonunda görüntülemek için interpolation kullanın:

<h3>Current customer: {{ currentCustomer }}</h3>

Angular, currentCustomer öğesini ilgili bileşen özelliğinin dize değeriyle değiştirir. Bu durumda, değer Maria‘dır.

Aşağıdaki örnekte Angular, title ve itemImageUrl özelliklerini değerlendirerek bazı başlık metinlerini ve bir resmi görüntüler.

<p>{{ title }}</p>
    <div><img alt="item" src="{{ itemImageUrl }}"></div>
Neler hissediyorsun?

Powered by BetterDocs