Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save jsheridanwells/1fee874ca9e0addefd0241419dcc561e to your computer and use it in GitHub Desktop.
Save jsheridanwells/1fee874ca9e0addefd0241419dcc561e to your computer and use it in GitHub Desktop.
An example of Angular content projection. I was following this: https://angular.io/guide/content-projection#conditional-content-projection, but couldn't get it right away
import { Component, ContentChild, Directive, Input, OnInit, TemplateRef } from '@angular/core';
// parent component where the list is rendered and where we can decide where which conditional field will be rendered
@Component({
selector: 'app-root',
template: `
<h2>Here's where the chips come in yo</h2>
<div *ngFor="let c of config">
<app-chip [hasConditionalField]="c.hasConditionalField">
<ng-template appConditionalField>
<app-conditional-field [id]="c.conditionalFieldId"></app-conditional-field>
</ng-template>
</app-chip>
</div>
`
})
export class AppComponent {
config = [
{hasConditionalField: true, conditionalFieldId: 1},
{hasConditionalField: false, conditionalFieldId: 2},
{hasConditionalField: true, conditionalFieldId: 3},
{hasConditionalField: false, conditionalFieldId: 4},
{hasConditionalField: true, conditionalFieldId: 5},
];
}
// this directive creates a template ref where we can pass date into the template
@Directive({
selector: '[appConditionalField]'
})
export class ConditionalFieldDirective {
constructor(public templateRef: TemplateRef<unknown>) {
}
}
// this component has the ng-container that will house ng-template. the Directive binds this component with
// the ng-template in a consuming component
@Component({
selector: 'app-chip',
template: `
<p>i'm the chip</p>
<div *ngIf="hasConditionalField">
<ng-container [ngTemplateOutlet]="conditionalField.templateRef"></ng-container>
</div>
`
})
export class ChipComponent {
@ContentChild(ConditionalFieldDirective) conditionalField: ConditionalFieldDirective;
@Input() hasConditionalField: boolean;
}
// the parent component will choose this component, or any other to conditionally render
@Component({
selector: `app-conditional-field`,
template: `
<p>Id is {{ id }}.</p>
<p>Conditional Text is {{ conditionalText }}</p>
`
})
export class ConditionalFieldComponent implements OnInit {
@Input() id: number;
conditionalText: string;
ngOnInit(): void {
switch (this.id) {
case 1:
this.conditionalText = 'first is wurst';
break;
case 2:
this.conditionalText = 'second is heaven';
break;
case 3:
this.conditionalText = 'third is a turd';
break;
case 4:
this.conditionalText = 'fourth goes forth';
break;
case 5:
this.conditionalText = 'fifth is a sith';
break;
default:
this.conditionalText = 'dont got nuthin';
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment