How to use ng-container with ng-content (with select tag) in angular 4

Issue How do you use ng-container in combination with ng-content that has a select tag. <div class=”container”> <div id=”first”> <ng-container *ngTemplateOutlet=”widgetContent”></ng-container> <div> <div id=”second”> <ng-container *ngTemplateOutlet=”widgetContent”></ng-container> </div> </div> <ng-content #widgetContent select=”side-widget, [sidewidget]”></ng-content> Solution Try this <div class=”container”> <div id=”first”> <ng-container

Continue reading

Angular 6: get reference to Components created with *ngFor inside ng-container tag

Issue I’using ng-container to iterate on a list and create components <ng-container *ngFor=”let f of optionsList; let i = index;”> <!– component–> <app-component #fieldcmp *ngIf=”isAppComponent(f)” ></app-field> <!–another components–> <app-anoter-component1 *ngIf=”isAnotherComponent1(f)”> </app-anoter-component1> … <app-anoter-componentn *ngIf=”isAnotherComponentn(f)”> </app-anoter-componentn> </ng-container> I would to list

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

angular 8: single ng-container for multiple view child references

Issue I have three viewchild decorators in my component like this: @ViewChild(‘propertiesPage1’, { read: ViewContainerRef, static: true }) propertiesPage11: ViewContainerRef; @ViewChild(‘propertiesPage2’, { read: ViewContainerRef, static: true }) propertiesPage22: ViewContainerRef; @ViewChild(‘propertiesPage3’, { read: ViewContainerRef, static: true }) propertiesPage33: ViewContainerRef; The references

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

Mock back-end responses in Angular 2

Issue In my application made with Angular 1, I’ve used angular-mocks to build front-end without requiring the back-end to be up and running: (function() { angular .module(‘myapp’) .run([‘$httpBackend’, function($httpBackend) { $httpBackend.whenGET(/.*\/api\/ratings\/\?.*/).respond(function(method, url) { var params = matchParams(url.split(‘?’)[1]); var list =

Continue reading

Angular – FormArrayName in subcomponents

Issue I have three components: consent consent-scope-list consent-scope-item consent hosts a FormGroup which contains two FormArrays. consentForm = this.fb.group({ identityScopes: this.fb.array([]), resourceScopes: this.fb.array([]) }); get identityScopes(): FormArray { return this.consentForm.get(“identityScopes”) as FormArray; } get resourceScopes(): FormArray { return this.consentForm.get(“resourceScopes”) as

Continue reading

Angular Reactive Form submit and clear validation

Issue I have a reactive form <form [formGroup]=”secondFormGroup”> <ng-template matStepLabel>enter items</ng-template> <div style=”display: flex; flex-direction: column;”> <mat-form-field> <input matInput type=”text” placeholder=”category” [(ngModel)]=”newItem.CategoryName” formControlName=”category” /> </mat-form-field> <mat-form-field> <input matInput type=”text” placeholder=”sub category” [(ngModel)]=”newItem.SubCategoryName” formControlName=”subCategory” /> </mat-form-field> <mat-form-field> <input matInput type=”text” placeholder=”product”

Continue reading

Cannot access the nested formGroup's value

Issue I am creating nested formGroup fields. The following is my html <form [formGroup]=”userProfileForm” (ngSubmit)=”bookUser()” class=”form”> <!– userName –> <div class=”form-group”> <label for=”userName”>Name:</label> <input type=”text” class=”form-control” id=”userName” formControlName=”userName”> </div> <!– mobile –> <div class=”form-group”> <label for=”mobileNumber”>Mobile:</label> <input type=”text” class=”form-control” id=”mobileNumber”

Continue reading

I need to convert one of the form arrray in my formGroup

Issue This is my ngOnInit ngOnInit() { this.formGroup = this._formBuilder.group({ basic: this._formBuilder.array([this.basicGroup()]), experience: this._formBuilder.array([this.experienceGroup()]), education: this._formBuilder.array([this.educationGroup()]), skills: this._formBuilder.array([this.skillsGroup()]), contact: this._formBuilder.array([this.contactGroup()]), summary: this._formBuilder.array([this.summaryGroup()]), }); then I pass values of form group to params and print it on console. In my console

Continue reading