Issue I am making a ngx-datatabel wraper and i want to pass the column template from the parent component. Which i am doing through ng-template outlet. But its not being rendered for some reason. Here is how i am passing
Continue readingTag: ng-template
How to render a part of Component A in Component B
Issue I have a component A and B <div class=”A”> <div class=”A1″></div> <div class=”A2″></div> </div> <div class=”B”> <!–want to display <div class=”A1″></div> here–> </div> Component B does not contain component A or way around <componentA></componentA> <componentB></componentB> I tried to wrap
Continue readingAngular – What's the best way to include html in multiple components?
Issue I need to put a loading in multiple components of my project. So instead of putting the same HTML over and over again across the components, I need to know what’s the best way to not repeat code, but
Continue readingAccess child component variables within ng-container
Issue I have a custom component called Suggestion List, which displays a list of Suggestions to the user from an observable. I have created this component as generic as possible so you can pass any array of data, so I’d
Continue readingHow 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 readingHow 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 readingAccess element replaced with ng-content
Issue I’ve tried to create some tabs component that some how can be used like Angular Material Component. But the solution I’ve made is not right and is buggy I’ve used document.getElementsByTagName(‘app-tab’) This is tabs component template This is the
Continue readingAngular: ng-content doesn't render with *ngIf then else
Issue I want to style the content differently depending on the [id] of the popup-content. Now only the ‘then’ case of *ngIf renders when the conditions are true. If the conditions aren’t met, the <ng-content> inside the else case doesn’t.
Continue readingCall 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 readingAngular 4 Dynamic form with nested groups
Issue I want to generate a reactive form from the tree structure. Here is the code that creates the form items (form groups and controls). For the controls nested in form group it I use a recursive template. import {
Continue readingAngular – issue looping with an ng-container
Issue I want to call an ng-template from within a ngFor using an ng-container My list is an array and has a list of objects. one property of an object is title – seen in the ng-template. Html: <ul> <li
Continue readingHow to wrap an Angular Component and pass ng-template from outer to inner component
Issue I am using Angular 5 and trying to wrap ng-select in a custom component. My reason is to encapsulate it so it could be easily replaced if needs be. If there is a better way to do this please
Continue readingAngular 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 readingng-content inside ng-template appears only in one ng-container
Issue I’m creating a flip panel. The panel is composed in three parts. panel-tool-bar panel-front panel-back The tool-bar has a fix part, the flip button. In my flip-panel.component I have a ng-template for the tool-bar because the tool bar should
Continue readingAngular 8: Not Showing the content of ng-tmplate in nested structure
Issue I have a model that in its structure has a list and one enum property like this: export class myModel { Items: any[]=[]; ItemsType: ItemType; } and I want to show the list of my model in the template
Continue readingngTemplateOutlet inside angular materials autocomplete only renders with default option
Issue I am trying to create a set of custom templates using materials autocomplete and ngTemplateOutlet to switch in which template I want to use to display the results (e.g. if there are grouped results they will display differently to
Continue readingHow to render ng-template dynamically with Template Reference in Angular
Issue I tried the example in this question Dynamic ngTemplateOutlet value but still, no success. I want to dynamically display an ng-template form based on the option selected by the user. I have defined global variables and 3 forms with
Continue readingInjecting 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 readingno 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 readingusage of ngFor with ng template in ngx-datatable-column
Issue I am having a problem here where my ngFor does not show any data, although there is no stack error or something. I want to know how to display my array of objects -called “cldbAccounts”- which has to objects
Continue readingChild 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 readingHow to pass data to ng-template from conditional ng-container
Issue My data model: export class Contact { constructor( public type: ContactTypes, public name: string, public link?: string ) { } } export enum ContactTypes { Address = ‘address-card-o’, Phone = ‘phone’, Mobile = ‘mobile’, Email = ‘envelope-o’, FaceBook =
Continue readingHow 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 readinghow set other templates for elements from dropdown angular prime ng
Issue I have a dropdown from PrimeNg with few elements. .ts this.cities = [ {name: ‘New York’, code: ‘NY’}, {name: ‘Rome’, code: ‘RM’}, {name: ‘London’, code: ‘LDN’}, {name: ‘Istanbul’, code: ‘IST’}, {name: ‘Paris’, code: ‘PRS’} ]; .html <p-dropdown [options]="cities" [(ngModel)]="selectedCity1"
Continue readingAngular 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 readingAngular get reference to element to custom attribute directive inside of a projected template with ngTemplateOutlet
Issue I’m having an issue modifying the css and click event on a custom attribute directive The DIV in question is inside of a reference to a projected `’ and passed into a nested child. Here is how it works
Continue readingAngular dynamic template rendering like ui grid cell template (template declared in colDefs of parent)
Issue Angular (7) dynamic template (ng-template) rendering like ui grid cell template (template declared in colDefs of parent); I tried in so many ways since more than 30 days, watched ng-template rendering videos, articles, but could’not find any solution, kindly
Continue readingAngular dynamic template rendering like ui grid cell template (template declared in colDefs of parent)
Issue Angular (7) dynamic template (ng-template) rendering like ui grid cell template (template declared in colDefs of parent); I tried in so many ways since more than 30 days, watched ng-template rendering videos, articles, but could’not find any solution, kindly
Continue readingng-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 readingTemplateRef 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 readingTemplateRef 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 readingwhy *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 readingAngular 4 ng-template within another ng-template doesn't work
Issue I am using ng-bootstrap component ngtabset. When I nest ng-templates I don’t see anything in the view. Can someone explain why and how to resolve it? The following works and shows me two tabs with content from both tabs
Continue reading<ng-template></ng-template> is loading multiple times
Issue I am using ngTemplateOutlet to load . but It loads a template multiple times .It is loading correct template but it executing multiple times loadTemplate() method. In HTML: <table> <thead> </thead> <tbody> <ng-template [ngTemplateOutlet]=”loadTemplate()”></ng-template> </tbody> </table> <ng-template #template1> <tr
Continue readingIs there a performance difference between <ng-container> and <ng-template>?
Issue I have a doubt regarding <ng-container> and <ng-template>. Which is better to be used in our code. I’ve read an answer regarding the difference between this two tag over here on SO. It says Angular compiler de-sugars(make it a
Continue readingangular2 conditional ng-template vs conditional div
Issue I am trying to figure out Angular2 structural directives and at the moment, I cannot spot the difference between a conditional div and a conditional ng-template. Technically this code: <div *ngIf=”true”> <other-component></other-component> </div> will do the same job with
Continue readingHow to use ng-template inside innerHTML in Angular
Issue Can someone help me, how to use ng-template inside innerHTML tag, Stackblitz Demo: https://stackblitz.com/edit/angular-xgnnj4 What I wanted to do is, In the Component HTML <div [innerHTML]=”htmlString”><div> In the Component TS @ViewChild(‘dynamicComponent’, { static: false, read: ViewContainerRef }) myRef: ViewContainerRef;
Continue readingAngular 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 readingTemplate 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 readingAngular 10, TypeError in browser console, but no error in build
Issue 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
Continue readingAngular 2 writing structural directive like ngFor, iterableDiffer may be causing errors
Issue Hello I am fairly new to Angular 2, and wanted to write an implementation of ngFor to practice. I found this tutorial: https://teropa.info/blog/2016/03/06/writing-an-angular-2-template-directive.html I had it working, but recently I keep getting this error. “ERROR TypeError: this._trackByFn is not
Continue readingAccessing each ng-template name using @ContentChildren()
Issue I have written a component named my-component and added some ng-template inside, and named each with # like this: <my-component> <ng-template #one> 1st format </ng-template> <ng-template #two> 2nd template </ng-template> <ng-template #three> 3rd template </ng-template> </my-component> at the declaration
Continue readingWhat gives the context to ngTemplate in case of *ngFor?
Issue I had some confusion regarding ngTemplateOutletContext , specifically how it is passed to ngTemplate or who passes it to ngTemplate which surrounds the element on which *ngFor was applied. The confusion builds up when I compare it to the
Continue readingHow to reuse an ngTemplate which wraps a Viewchild that updates it's content
Issue I want to reuse an ng-template with a viewchild that changes dynamically and have it update in all the places I reuse the ng-template. However it doesnt update in all places. It works when i make the content of
Continue reading