Data Binding

Interpolation


<span>{{ currentBook.author }}</span>


@Component(...)
export class BookEntryComponent {
  currentBook = { author:'John Example', title: 'Angular in a nutshell' };
}

Angular Docs

Property Binding


<ul>
  <li (click)="selectBook(firstBook)">{{ firstBook.title }}</li>
  <li (click)="selectBook(secondBook)">{{ secondBook.title }}</li>
</ul>
<book-entry [book]="selectedBook"></book-entry >


@Component(...)
export class BookOverviewComponent {
  firstBook = new Book(...);
  secondBook = new Book(...);
  selectedBook: Book|null = null;

  selectBook(book:Book):void {
    this.selectedBook = book;
  }
}

Angular Docs

Property Binding


<ul>
  <li (click)="selectBook(firstBook)">{{ firstBook.title }}</li>
  <li (click)="selectBook(secondBook)">{{ secondBook.title }}</li>
</ul>
<book-entry [book]="selectedBook"></book-entry >


@Component(...)
export class BookEntryComponent {
  @Input() book: Book|null;
}


        <div>Title: {{ book?.title }}</div>
        <div>Author: {{ book?.author }}</div>

Angular Docs

Event Binding


<book-entry [currentBook]="books[0]"
           (selectBook)="rentBook($event)">
</book-entry>
<book-entry [currentBook]="books[1]"
           (selectBook)="rentBook($event)">
</book-entry>


@Component(...)
export class BookOverviewComponent {
  books = [new Book(...), new Book(...)];
  rentedBook: Book|null = null;

  rentBook(book: Book) {
    this.rentedBook = book;
  }
}

Angular Docs

Event Binding


<book-entry [currentBook]="books[0]"
           (selectBook)="rentBook($event)"></book-entry>


@Component(...)
export class BookEntryComponent {
  @Input() currentBook: Book;
  @Output() selectBook = new EventEmitter<Book>();

  onSelectBtnClick(): void {
    this.selectBook.emit(this.currentBook);
  }
}


    <div>Book title: {{ currentBook.title }}</div>
    <button (click)="onSelectBtnClick()">Rent the book</button>

Angular Docs

Input (Data) and Output (Event) Binding

Two way binding


<input type="text" [(ngModel)]="currentBook.author">


@Component(...)
export class BookEntryComponent {
  currentBook = { author:'John Example', title: 'Angular in a nutshell' };
}

Angular Docs

Structural Directives

ng-if (Old Syntax)

              
                <div *ngIf="book">
                  <p>{{ book.description }}</p>
                </div>

@if (Angular v17 onwards)

              
                @if(book) 
                {
                  <p>{{ book.description }}</p>
                }

Removes element from the DOM if the book is not present.

Angular Docs *ngIf & Angular Docs @if

Structural Directives

ng-for (Old Syntax)

            
              <ul>
               <li *ngFor="let myItem of myList">{{ myItem.someProperty }}</li>
              </ul>

@for (Angular v17 onwards)

            
              <ul>
               @for (myItem of myList; track $index) 
               {
                 <li> {{ myItem.someProperty }} </li> 
               }
              </ul>

Angular Docs *ngIf & Angular Docs @for

Creates an element for every item of the collection.

Example - Parent


@Component({
  selector: 'app-book-overview',
  template: `<app-book-entry
                 *ngFor="let book of books"
                 [currentBook]="book"
                 (selectBook)="rentBook($event)">
             </app-book-entry>`
})
export class BookOverviewComponent {
  books = [new Book(...), new Book(...)];
  rentedBook: Book|null = null;

  rentBook(book: Book) {
    this.rentedBook = book;
  }
}

Example - Child


@Component({
  selector: 'app-book-entry',
  template: `<div *ngIf="currentBook">
               <div>Book author: {{ currentBook.author }}</div>
               <div>Book title: {{ currentBook.title }}</div>
               <button (click)="onSelectBtnClick()">Rent book</button>
            </div>`
})
export class BookEntryComponent {
  @Input() currentBook: Book;
  @Output() selectBook = new EventEmitter<Book>();

  onSelectBtnClick(): void {
    this.selectBook.emit(this.currentBook);
  }
}