Below approaches have changed
@Component({
selector: 'fa-host',
template: `
<button (click)="createIcon()">
Create
</button>
<br>
<ng-container #host></ng-container>
`
})
class HostComponent {
readonly container = viewChild('host', { read: ViewContainerRef });
createIcon() {
const componentRef = this.container().createComponent(FaIconComponent);
- componentRef.instance.icon = faUser;
- componentRef.instance.render();
+ componentRef.setInput('icon', faUser);
}
}@Component({
selector: 'fa-host',
template: '<fa-icon [icon]="faUser" (click)="spinIcon()"></fa-icon>'
})
class HostComponent {
readonly faUser = faUser;
readonly iconComponent = viewChild(FaIconComponent);
spinIcon() {
const iconComponent = this.iconComponent();
- iconComponent.animation = 'spin';
+ iconComponent.animation.set('spin');
}
}