نحوه استفاده از دستورالعمل زاویه ای داخلی: ngIf، ngFor، ngClass و موارد دیگر

noPlaylists: boolean = false;
playlists: any = [];
 
constructor() { }
  ngOnInit(): void {
    if(this.playlists.length === 0) {
      this.noPlaylists = true;
    }
}

<div *ngIf="noPlaylists" class="center">
      <span class="errorMessage">There are no playlists available.</span>
</div>

<div *ngIf="noPlaylists; else playlistsExist" class="center">
      <span class="errorMessage">There are no playlists available.</span>
</div>
<ng-template #playlistsExist>
    <div class="center">
        <span class="successMessage">Playlists found.</span>
    </div>
</ng-template>

playlists: any = [
   {"name": "Rock", "numberOfSongs": 5},
   {"name": "Contemporary", "numberOfSongs": 9},
   {"name": "Popular", "numberOfSongs": 14},
   {"name": "Acoustic", "numberOfSongs": 3},
   {"name": "Wedding Songs", "numberOfSongs": 25},
   {"name": "Metal", "numberOfSongs": 0},
];

<span class="successMessage">Playlists found.</span>
<div *ngFor="let playlist of playlists" class="item">
    <div class="flex">
       <span>{{playlist.name}}</span>
       <span>{{playlist.numberOfSongs}} songs</span>
    </div>
</div>

اگر تعداد آهنگ‌ها بیشتر از صفر باشد، کلاس «آهنگ‌ها» را به div اعمال می‌کند. این به div رنگ پس زمینه خاکستری می دهد. در غیر این صورت، اگر تعداد آهنگ ها صفر باشد، کلاس “noSongs” را به div اعمال می کند. این به div رنگ پس زمینه قرمز می دهد.

.songs {
  background-color: #F7F5F2;
}
.noSongs {
  background-color: #FFA8A8;
}

<div *ngFor="let playlist of playlists" class="item" [ngClass]="playlist.numberOfSongs > 0 ? 'songs' : 'noSongs'">
    <div class="flex">
        <span>{{playlist.name}}</span>
         <span>{{playlist.numberOfSongs}} songs</span>
     </div>
 </div>

نحوه استفاده از ngStyle

به جای استفاده از ngClass، اگر می‌خواهید استایل‌سازی درون خطی را به جای استایل‌سازی از طریق کلاس اعمال کنید، می‌توانید از ngStyle استفاده کنید.

1. ngClass را از مرحله قبل تغییر دهید تا به جای آن از ngStyle استفاده کنید.
            {{playlist.name}}         {{playlist.numberOfSongs}} آهنگ          div>
2. اگر نیاز به اعمال بیش از یک سبک درون خطی دارید، می توانید هر سبک را با کاما جدا کنید.[ngStyle]=”{‘background-color’: playlist.numberOfSongs > 0 ? ‘#F7F5F2’ : ‘#FFA8A8’, ‘color’ ‘: playlist.numberOfSongs > 0 ? ‘black’ : ‘blue’ }”

<div *ngFor="let playlist of playlists" class="item" [ngStyle]="{'background-color': playlist.numberOfSongs > 0 ? '#F7F5F2' : '#FFA8A8' }>
     <div class="flex">
         <span>{{playlist.name}}</span>
         <span>{{playlist.numberOfSongs}} songs</span>
     </div>
 </div>

[ngStyle]="{'background-color': playlist.numberOfSongs > 0 ? '#F7F5F2' : '#FFA8A8', 'color': playlist.numberOfSongs > 0 ? 'black' : 'darkblue' }"

نحوه استفاده از ngModel

می توانید از ngModel برای اتصال دو طرفه استفاده کنید. این بدان معنی است که می توانید مقدار یک ویژگی را بین فایل های HTML و TypeScript منتقل کنید.

به عنوان مثال، فرض کنید یک عنصر ورودی در فایل HTML دارید که از ngModel استفاده می کند. ویژگی ngModel به یک متغیر در فایل TypeScript محدود شده است. وقتی مقداری را در ورودی وارد می کنید، متغیر موجود در فایل TypeScript را به روز می کند.

اگر سایر div ها از آن متغیر استفاده کنند، تغییرات ایجاد شده در ویژگی در فایل TypeScript در HTML نیز منعکس خواهد شد.

1. در app.module.ts، FormsModule را به ورودی‌های بالای فایل، و همچنین به import array.import { FormsModule } from ‘@angular/forms’;@NgModule({    واردات: [         …  Forms Module اضافه کنید ]})
2. یک ویژگی در فایل TypeScript اضافه کنید تا زمانی که کاربر در حال تغییر نام یک playlist است را پیگیری کند.renamingPlaylists: boolean = false;
3. متغیر لیست‌های پخش را عمومی کنید تا هنگام استفاده از ngModel در فایل HTML قابل دسترسی باشد. لیست‌های پخش عمومی: any = [    …];
4. دو دکمه در فایل HTML اضافه کنید، که به شما امکان می‌دهد نام هر فهرست پخش را تغییر دهید یا آن را لغو کنید.تغییر نام لیست های پخشتوقف تغییر نام
5. یک کادر ورودی را در داخل قسمت هر لیست پخش اضافه کنید. ورودی تنها زمانی قابل مشاهده خواهد بود که روی دکمه تغییر نام لیست پخش کلیک کنید. این کادر ورودی دارای یک ngModel متصل به “playlist.name” است. هنگامی که نام جدیدی را در کادر ورودی وارد می کنید، playlist.name در فایل TypeScript به روز می شود. سپس سایر div های موجود در فایل HTML که از playlist.name استفاده می کنند نیز به روز می شوند.

import { FormsModule } from '@angular/forms';
@NgModule({
    imports: [
        ...
        FormsModule
    ]
})

renamingPlaylists: boolean = false;

public playlists: any = [
    ...
];

<button type="button" class="btn btn-info" *ngIf="!renamingPlaylists" (click)="renamingPlaylists=true">Rename Playlists</button>
<button type="button" class="btn btn-info" *ngIf="renamingPlaylists" (click)="renamingPlaylists=false">Stop renaming</button>

<input type="text" *ngIf="renamingPlaylists" class="form-control input-field" id="name" required [(ngModel)]="playlist.name" />

نحوه استفاده از ngSwitch

می‌توانید از ngSwitch برای نمایش عناصر خاص بر اساس کیس‌های داخل کیس سوئیچ استفاده کنید.

1. یک ویژگی “رتبه بندی” جدید به اشیاء داخل آرایه لیست های پخش اضافه کنید. این ویژگی می‌تواند هر عددی بین 0 تا 5 (شامل) باشد. فهرست‌های پخش عمومی: any = [    {“name”: “Rock”، “numberOfSongs”: 5، “rating”: 5}،    {“name”: “Contemporary” , “numberOfSongs”: 9، “rating”: 1}،    {“name”: “Popular”، “numberOfSongs”: 14، “rating”: 5}،    {“name”: “Acoustic”، “numberOfSongs”: 3 , “رتبه”: 4}،    {“name”: “Wedding Songs”، “numberOfSongs”: 25، “rating”: 5}،    {“name”: “Metal”، “numberOfSongs”: 0، “rating”: 0}،  ]؛
2. زیر نام و تعداد آهنگ‌ها را برای یک لیست پخش، یک دکمه سوئیچ اضافه کنید. بر اساس شماره رتبه‌بندی فهرست پخش، فهرست پخش تعداد صحیح ستاره‌ها را نشان می‌دهد.
      {{playlist.name}}   {{playlist.numberOfSongs} } آهنگ
       

   ★

      

   ★★

      

   ★★★

      

   ★★★★

      

   ★★★★★

      

   بدون رتبه‌بندی

public playlists: any = [
    {"name": "Rock", "numberOfSongs": 5, "rating": 5},
    {"name": "Contemporary", "numberOfSongs": 9, "rating": 1},
    {"name": "Popular", "numberOfSongs": 14, "rating": 5},
    {"name": "Acoustic", "numberOfSongs": 3, "rating": 4},
    {"name": "Wedding Songs", "numberOfSongs": 25, "rating": 5},
    {"name": "Metal", "numberOfSongs": 0, "rating": 0},
  ];

<div class="flex">
   <span>{{playlist.name}}</span>
   <span>{{playlist.numberOfSongs}} songs</span>
</div>
<div [ngSwitch]="playlist.rating" style="text-align:right">
    <div *ngSwitchCase="'1'">★</div>
   <div *ngSwitchCase="'2'">★★</div>
   <div *ngSwitchCase="'3'">★★★</div>
   <div *ngSwitchCase="'4'">★★★★</div>
   <div *ngSwitchCase="'5'">★★★★★</div>
   <div *ngSwitchDefault>No ratings</div>
</div>

یادگیری بیشتر با Angular

اکنون شما اصول اولیه دستورالعمل های Angular، از جمله نحوه استفاده از ngIf، ngFor، ngClass، ngStyle، ngModel و ngSwitch را یاد گرفته اید. می توانید آنها را برای ایجاد رابط کاربری پیچیده تر ترکیب کنید. چیزهای بیشتری برای کاوش و یادگیری در مورد Angular وجود دارد، مهم نیست که مبتدی هستید یا در سطح پیشرفته.

منبع مقاله