Angular. Встроенные директивы. Динамические атрибуты элементов

Главная » Видеоуроки » JavaScript » Angular. Встроенные директивы. Динамические атрибуты элементов

В этом уроке мы рассмотрим некоторые встроенные Angular директивы — ngStyle, ngClass, ngSwitchCase, ng-template

Также мы разберем другие локальные переменные внутри шаблона директивы ngFor. Особенно отмечу важность trackBy. Этот параметр увеличивает производительность Angular приложений при отрисовке больших коллекций.

Код урока (класс компонента)

import { Component } from '@angular/core';
import { UserService } from './services/user.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  user: any;
  myClass = 'myClass';
  color: 'red' | 'green' = 'red';

  constructor(private _userService: UserService) {
  }

  getUser() {
    this.user = this._userService.getUser();
  }

  changeColor() {
    this.user.login = 'new login';
    this.color = this.color === 'red' ? 'green' : 'red';
  }

  trackRole(index, item) {
    console.log(index, item);
  }
}

Код урока (шаблон компонента)

<p [attr.class]="'myClass'" [style.fontSize]="'20px'">User info</p>
<p [attr.class]="myClass" [style.fontSize]="'20px'">User info</p>

<button (click)="getUser()">Get user</button>

<div *ngIf="user; else userNotFound">
  <span (click)="changeColor()" [ngStyle]="{'color': color}">{{user.login}}</span>
  <p [ngClass]="{'oneRole': user.roles.length === 1, 'twoRoles': user.roles.length === 2}" [ngSwitch]="user.roles.length">
    <ng-template ngSwitchCase="1">1 user role</ng-template>
    <ng-template ngSwitchCase="2">1 user role</ng-template>
    <ng-template ngSwitchDefault>no user roles</ng-template>
  </p>


  <ul>
    <li *ngFor="let role of user.roles; index as i; first as isFirst; last as isLast; trackBy: trackRole">
      {{i}} {{role}} {{isFirst}} {{isLast}}
    </li>
  </ul>

</div>

<ng-template [ngIf]="!user">
  User not found
</ng-template>

<ng-template #userNotFound>
  <div>User not found!</div>
</ng-template>

0 Комментариев

Оставить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *


Срок проверки reCAPTCHA истек. Перезагрузите страницу.

Pin It on Pinterest

Share This