ng-container ელემენტი ანგულარში

ანგულარის სპეციფიკიდან გამოდინარე ხშირად გვაქვს შემთხვევები, როდესაც გვესაჭიროება სტრუქტურული დირექტივის გამოყენება, მაგრამ არ გვჭირდება დამატებითი ელემენტის დარენდერება.

სწორედ ამ პრობლემის მოგვარების საშუალებას გვთავაზობს ng-container ელემენტი.

პრობლემის გასააზრებლად შევქმნათ ობიექტების მასივი და ვეცადოთ მის დარენდერებას *ngFor სტრუქტურული დირექტივის დახმარებით.

app.component.ts

import { Component, OnInit } from '@angular/core';
interface Data {
  id: string;
  name: string;
}
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  public data: Data[] = [
    { id: '1', name: 'Val do' },
    { id: '2', name: 'Jon doe' },
    { id: '3', name: 'Lorem name' },
  ];
  constructor() {}
  ngOnInit(): void {}
}

app.component.html

<div *ngFor="let el of data">
    {{ el.name }}
</div>

მოცემული მეთოდით დარენდერებისას დოკუმენტში ასევე დარენდერდება ყოველ ჯერზე div ელემენტი, რომელიც ჩვენთვის არა სასურველი ელემენტია, სწორედ ასეთი შემთხვევას აგვარიდებს ng-container-ის გამოყენება.

თუ div თეგს ჩავანაცვლებთ ng-container-ით ბრაუზერში დარენდერდება მხოლოდ {{ el.name }} მნიშვნელობები და არა დამატებითი არასასურველი html სელექტორი

მაგალითი

<ng-container *ngFor="let el of data">
    {{ el.name }}
</ng-container>

ასევე ანგულარის სპეციფიკიდან გამომდინარე ერთ ელემენტზე არ შეგვიძლია გამოვიყენოთ რამდენიმე სტრუქტურული დირექტივა.

მოდი გავაკეთოთ მაგალითი. წარმოვიდგინოთ, რომ *ngFor სტრუქტურული დირექტივით უნდა დავბეჭდოთ მხოლოდ ის ელემენტი რომელსაც id აქვს 2-ის მნიშვნელობის ტოლი. ჩვენ თუ ვეცდებით მსგავს ჩანაწერს

<ng-container *ngFor="let el of data" *ngIf="el.id == '2'">
    {{ el.name }}
</ng-container>

მივიღებთ შეცდომას, რადგან არ შეგვიძლია რამდენიმე სტრუქტურული დირექტივის ერთ სელექტორში გამოყენება, შესაბამისად გვრჩება შემდეგი გზა.

<ng-container *ngFor="let el of data">
    <div *ngIf="el.id == '2'">{{ el.name }}</div>
</ng-container>

რომელიც წარმატებით ამოხსნის ჩვენს პრობლემას, მაგრამ აქ ბრაუზერში ისევ გვექნება არასასურველი div სელექტორი, სწორედ ამის მოსაგვარებლად აქაც შეგვიძლია div ელემენტის ng-container-ით ჩანაცვლება, რომელიც თავიდან აგვარიდებს ზედმეტი ელემენტის დაგენერირებას

<ng-container *ngFor="let el of data">
    <ng-container *ngIf="el.id == '2'">{{ el.name }}</ng-container>
</ng-container>