Created
March 13, 2020 06:47
-
-
Save ericjeker/fcd59a31955dd89b41536964dde05319 to your computer and use it in GitHub Desktop.
Full example of a customizable component using TemplateRef and ContentChild in Angular
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div id="articles-list"> | |
<!-- Our page carded component --> | |
<app-page-carded> | |
<ng-template #title> | |
<h1>Users List</h1> | |
</ng-template> | |
<ng-template #search> | |
<!-- Display a search box --> | |
<app-list-search [listForm]="listForm"></app-list-search> | |
<!-- Display a modal form containing our filters --> | |
<app-list-filters [listForm]="listForm"></app-list-filters> | |
</ng-template> | |
<ng-template #actions> | |
<!-- Some actions we want to add on the list --> | |
<button [routerLink]="'/articles/new'"><mat-icon>add</mat-icon></button> | |
</ng-template> | |
<ng-template #content> | |
<!-- And finally our list and a pagination --> | |
<app-users-list [dataSource]="dataSource"></app-users-list> | |
<mat-paginator (page)="onPageEvent($event)"></mat-paginator> | |
</ng-template> | |
</app-page-carded> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@Component({ | |
selector: 'articles', | |
templateUrl: './articles.component.html', | |
styleUrls: ['./articles.component.scss'] | |
}) | |
export class ArticlesComponent implements OnInit, OnDestroy { | |
public dataSource: Article[]; | |
/** | |
* listForm is a FormGroup, by subscribing to its valueChanges we can | |
* refresh the dataSource every time the filters or search are changed. | |
**/ | |
protected listForm: FormGroup; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<ng-container> | |
<div class="header"> | |
<div class="title"> | |
<ng-container *ngTemplateOutlet="titleTemplate"></ng-container> | |
</div> | |
<div class="actions"> | |
<ng-container *ngTemplateOutlet="actionsTemplate"></ng-container> | |
</div> | |
<div class="search"> | |
<ng-container *ngTemplateOutlet="searchTemplate"></ng-container> | |
</div> | |
</div> | |
<div class="content"> | |
<ng-container *ngTemplateOutlet="contentTemplate"></ng-container> | |
</div> | |
</ng-container> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@Component({ | |
selector: 'app-page-carded', | |
templateUrl: 'page-carded.component.html', | |
stylesUrl: 'page-carded.component.scss', | |
ViewEncapsulation.None, | |
}) | |
class PageCarded { | |
@ContentChild('title', {static: true}) titleTemplate: TemplateRef; | |
@ContentChild('actions', {static: true}) actionsTemplate: TemplateRef; | |
@ContentChild('search', {static: true}) searchTemplate: TemplateRef; | |
@ContentChild('content', {static: true}) contentTemplate: TemplateRef; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Not sure if this is very clear but basically, we create a
PageCarded
component and reuse it inArticlesComponent
by passing different templates asContentChild
. These templates are injected inPageCarded
using thengTemplateOutlet
.