ng-template

reusable component in angular

允我心安 提交于 2021-02-10 22:21:46
问题 im trying to create my own select component so the final result will be like that in app.components.html for example <div> <app-my-select [(ngModel)]="val"> <app-my-option value="1" >one</app-my-option> <app-my-option value="2" >two</app-my-option> <app-my-option value="3" >three</app-my-option> <app-my-option value="4" >four</app-my-option> </app-my-select> </div> in my-select.component.html <input (click)="openPanel()" class="select-value-container" readonly (keydown)="keyDown($event.key)"

reusable component in angular

不羁的心 提交于 2021-02-10 22:20:34
问题 im trying to create my own select component so the final result will be like that in app.components.html for example <div> <app-my-select [(ngModel)]="val"> <app-my-option value="1" >one</app-my-option> <app-my-option value="2" >two</app-my-option> <app-my-option value="3" >three</app-my-option> <app-my-option value="4" >four</app-my-option> </app-my-select> </div> in my-select.component.html <input (click)="openPanel()" class="select-value-container" readonly (keydown)="keyDown($event.key)"

Template reference variable returns undefined inside ng-template

巧了我就是萌 提交于 2021-01-27 08:55:13
问题 Already tried this and this solution but nothing worked. I am using Angular 7 and trying to get a reference variable which I've placed inside the ng-template tag. But it always returns undefined test-component.html <ng-template #abc> <div #xyz> </div> </ng-template> test-component.ts @ViewChild('abc') abc: ElementRef; //---> works fine @ViewChild('xyz') xyz: ElementRef; //---> undefined test-component.ts ngAfterViewInit(){ console.log(this.xyz); //---> undefined } I've tried printing it in

ngTemplateOutlet - Angular 5 nested template driven form

柔情痞子 提交于 2021-01-04 10:36:14
问题 I have a ng-template which is being passed on from one of my component and i have a placeholder to accept the passed on ng-template onto my component as shown below in ngTemplateOutlet. <div> <form novalidate #myForm="ngForm"> <ng-container> <ng-template [ngTemplateOutlet]="myTemplate"> </ng-template> </ng-container> </form> </div> <!-- this template i am passing it from one of my other components --> <ng-template #myTemplate> <input type="text" name="myInput" placeholder="Input" [(ngModel)]=

Angular 10, TypeError in browser console, but no error in build

假如想象 提交于 2020-12-14 23:52:50
问题 No code changes done, upgraded to Angular 10, everything works except a feature. There were no build errors, but in browser console able to see below error. I guess this may be related to angular.core, rxjs, but unclear..appreciate your help. core.js:4197 ERROR TypeError: templateRef.createEmbeddedView is not a function at ViewContainerRef.createEmbeddedView (core.js:10092) at NgTemplateOutlet.ngOnChanges (ng_template_outlet.ts:65) at NgTemplateOutlet

Angular 10, TypeError in browser console, but no error in build

跟風遠走 提交于 2020-12-14 23:40:10
问题 No code changes done, upgraded to Angular 10, everything works except a feature. There were no build errors, but in browser console able to see below error. I guess this may be related to angular.core, rxjs, but unclear..appreciate your help. core.js:4197 ERROR TypeError: templateRef.createEmbeddedView is not a function at ViewContainerRef.createEmbeddedView (core.js:10092) at NgTemplateOutlet.ngOnChanges (ng_template_outlet.ts:65) at NgTemplateOutlet