How to create reusable component with custom buttons configuration

Issue So currently I have component which have multiple buttons configurable with options: test.component.html <button *ngIf="cleaning" (click)="onCleaning()" > {{‘btn.cleaning’|translate}} </button> <button *ngIf="remove" (click)="onRemoving()" > {{‘btn.remove’|translate}} </button> test.component.ts @Input() cleaning: boolean; @Input() remove: boolean; cleaningForm: FormGroup; parent.component.html <test [cleaning]="true" [remove]="false"></test> And

Continue reading

How to create reusable component with custom buttons configuration

Issue So currently I have component which have multiple buttons configurable with options: test.component.html <button *ngIf="cleaning" (click)="onCleaning()" > {{‘btn.cleaning’|translate}} </button> <button *ngIf="remove" (click)="onRemoving()" > {{‘btn.remove’|translate}} </button> test.component.ts @Input() cleaning: boolean; @Input() remove: boolean; cleaningForm: FormGroup; parent.component.html <test [cleaning]="true" [remove]="false"></test> And

Continue reading

Call parent component method from child in slot

Issue Is it possible to call the parent method from a child in a slot? For example: parent.component.ts methodFromParentComponent() { console.log(‘fires…’) } And then something like this: <parent-component> <child-component (click)="methodFromParentComponent"></child-component> </parent-component> Ofcourse that won’t work. I tried experimenting with ngTemplateOutlet:

Continue reading

Angular 6 Form Array cannot be accessed inside an ng-container

Issue I have an ng-container that describes all of my possible form field templates, essentially on a large switch statement depending on the field’s metadata: <ng-template #dynamicFormField let-field=”inputField”> <div *ngIf=”field.dataTypeName == ‘ShortText'”> <mat-form-field class=”col-md-6″> <input matInput type=”text” [placeholder]=”field.attributeLabel” [formControlName]=”field.attributeName”> </mat-form-field>

Continue reading

Injecting component to ng-container? (load ng-template from file)

Issue I’m trying to build a simple tabs-menu in my Angular app. parant.component.html: <div> <button (click)=”selectTab(1)”>Tab1</button> <button (click)=”selectTab(2)”>Tab2</button> <ng-container *ngTemplateOutlet=”(selected == 1) ? template1 : template2″> </ng-container> <ng-template #template1>I’m page 1</ng-template> <ng-template #template2>I’m page 2</ng-template> </div> parant.component.ts: public selected =

Continue reading

no render with mat-error, ng-template and *ngTemplateOutlet

Issue This code is working fine and properly (without ngTemplateOutlet): <mat-form-field [formGroup]=”formGroup”> <input matInput type=”text” [formControlName]=”fControlName” > <ng-container *ngIf=”isShowErrors()” ngProjectAs=”mat-error”> <ng-container *ngFor=”let error of showSMErrors” > <mat-error>{{ error.message }}</mat-error> </ng-container> </ng-container> </mat-form-field> But this code isnt working properly(with ngTemplateOutlet), why?

Continue reading

Child doesn't render template passed by parent

Issue Well, this is my parent component where I am trying to pass the template nodeTemplate to the child ils-tree <div class="nodes-panel"> <ils-tree layout="horizontal" [json]="nodes" [template]="nodeTemplate"> </ils-tree> </div> <ng-template #nodeTemplate> <ng-template let-node pTemplate="default"> <p class="node-type">{{node.data.nodeType}}</p> <p class="node-name">{{node.data.name}}</p> </ng-template> <ng-template let-node

Continue reading

How to load the ng-template in separate file?

Issue In below sample, I have used ng-template like below and it is working fine. Sample link: click here <ng-template #template let-dataSource=””> <span *ngIf=”dataSource.iconCss” class=”e-menu-icon {{dataSource.iconCss}}”></span> {{dataSource.header}} {{dataSource.text}} <span *ngIf=”dataSource.templateHeader” class=”e-login-content”> <button ejs-button cssClass=”e-info”>Sign In</button> </span> </ng-template> But I want

Continue reading

Angular 2- Error Cannot assign to a reference or variable

Issue I am using Angular 2. I have 2 nested ng-template as below: <ng-template ngFor let-support [ngForOf]=”support”> <div class=”row”> <div class=”col-sm-3″> <div class=”form-group form-float”> <div class=”form-line focused”> <select [ngModelOptions]=”{standalone: true}” [(ngModel)]=”support.option” class=”form-control”> <option value=”1″>1</option> <option value=”2″>2</option> <option value=”3″>3</option> <option value=”4″>4</option>

Continue reading

ng-content vs. ng-template

Issue What is the difference between ng-content and ng-template, and what are some different use-cases for each of them? Solution ng-content is used to project content at a specific place within a component. Example: <!– custom.component.html –> <h1> <ng-content></ng-content> </h1>

Continue reading

TemplateRef and click event

Issue I have a common template for different components but some buttons. So, I create a common component and change this buttons with ng-template: <component-common [buttonTemplate]=”buttonTemplate”> </component-common> <ng-template #buttonTemplate let-element=”element” let-method> <button (click)=”method”> element.name </button> </ng-template> In component-common.component.ts: export class

Continue reading

TemplateRef and click event

Issue I have a common template for different components but some buttons. So, I create a common component and change this buttons with ng-template: <component-common [buttonTemplate]=”buttonTemplate”> </component-common> <ng-template #buttonTemplate let-element=”element” let-method> <button (click)=”method”> element.name </button> </ng-template> In component-common.component.ts: export class

Continue reading

*ngIf doesn't work with ng-template (ionic 5/angular 9)

Issue Here is my component.page.ts file import { Component, OnInit } from ‘@angular/core’; @Component({ selector: ‘app-domestic’, templateUrl: ‘./domestic.page.html’, styleUrls: [‘./domestic.page.scss’], }) export class DomesticPage implements OnInit { opchoice: string; constructor() { } ngOnInit() { this.opchoice = "From"; console.log("OnInit opchoice? "

Continue reading

why *ngIf doesnt'work with ng-template?

Issue I have a condition in the template as follows: <ng-container> <p *ngFor=”let seat of InfoDetails?.seatInfo”> <template *ngIf=”seat.section”> Section {{seat?.section}} , </template> <template *ngIf=”seat.row”> Row {{seat?.row}}, </template> <template *ngIf=”seat.seatNo”> Seat number {{seat?.seatNo}} </template> </p> </ng-container> I have dataset that contains

Continue reading

Angular 8 Recursive Form

Issue I’m trying to generate dynamic form recursively from JSON schema, but i’m struggling with form control not being found. Here is Code Examples. I get this error ERROR Error: Cannot find control with name: ‘individualPerson’ I tried different approaches

Continue reading

Template parsing error while using ngTemplateOutlet in Angular

Issue I get the following error while implementing ngTemplateOutlet in my Angular code compiler.js:2420 Uncaught Error: Template parse errors: Parser Error: Missing expected } at column 47 in [searchListing; context: {$implicit: entityList:genericJobList, canCreateEntity:canCreateJob, nextBookmarkList:genericNextBmJobList,’disableScroll:disableJobScroll}] in ng:///SharedSearchModule/SearchCompareComponent.html@707:7 (" It says the

Continue reading