ng-content
Is a directive that allows content projection, enabling us to insert and display content within a component’s template from its parent component.
When it might be useful?
Let’s imagine that we have the drop-down component. We reuse this component in a many different places within our app.The drop-down itself always looks the same, only the options inside are changing. The design of the menu always is the same.
But the trigger of that dropdown might have a few different views.
View number 1:
View number 2:
View number 3:
How many ways do we have to implement it?
Solution number 1: add an @Input() decorator to with a type of trigger view and use it’s value as an *if-expression inside HTML.
Solution number 2: add an @Input() same as in the previous one and use its value for *ngSwitch with the several possible *cases inside HTML.
Solution number 3: no extra @Input() decorator inside , no extra expressions inside HTML, we going to use ng-content.
For sure those ways are only part of all possible ones, there are certainly others, it’s just 3 of the fastest ones from my point of view:) If you usually use another one feel free to share it in the comments.
In this article, I’m going to show you how to create the simple drop-down component with differrent views of it’s trigger using ng-content.
<div class=”drop-down-component”>
<div #dropDownMenuTrigger (click)=”openDropDown()” class=”drop-down-component__trigger”>
<ng-content select=”[drop-down-trigger]”></ng-content>
</div>
<ul class=”drop-down__list”>
<li *ngFor=”let option of dropDownData” class=”drop-down-component__option”>
<a (click)=”selectOption(option)” class=”drop-down-component__option-name” role=”button”>
{{ option.name }}
</a>
</li>
</ul>
</div>
DropDownComponent.ts
public isDropDownVisible: boolean = false;
@Input() dropDownData: ITDropDown[] | null = null;
@ViewChild(‘dropDownMenuTrigger’, { read: ElementRef, static: false })
dropDownMenuTrigger: ElementRef;
public openDropDown(): void {
this.isDropDownVisible = !this.isDropDownVisible;
}
public selectOption(option: ITDropDown): void {
//your logic here
}
ParentComponent.html
<app-drop-down [dropDownData]=”dropDownData”>
<div drop-down-trigger>
<img src=”/assets/images/your-icon-name.svg” class=”drop-down-component__trigger-inner” />
</div>
</app-drop-down>
As you can see it is a really simple way to create a dynamic view of a drop-downs trigger that frees us from the need to use extra expressions and decorators.
