angular-template – Page 2

Best method to set different layout for different pages in angular 4

January 22, 2023 by Tarik

You can solve your problem using child routes. See working demo at https://angular-multi-layout-example.stackblitz.io/ or edit at https://stackblitz.com/edit/angular-multi-layout-example Set your route like below const appRoutes: Routes = [ // Site routes goes here { path: ”, component: SiteLayoutComponent, children: [ { path: ”, component: HomeComponent, pathMatch: ‘full’}, { path: ‘about’, component: AboutComponent } ] }, // … Read more

Cannot find a differ supporting object ‘[object Object]’ of type ‘object’. NgFor only supports binding to Iterables such as Arrays

January 21, 2023 by Tarik

There you don’t need to use this.requests= when you are making get call(then requests will have observable subscription). You will get a response in observable success so setting requests value in success make sense(which you are already doing). this._http.getRequest().subscribe(res=>this.requests=res); If it still shows an error related to type, add any/RelevantModel type on subscribe parameter object. … Read more

What does two colons inside an angular expression {{::}} mean?

January 16, 2023 by Tarik

One-time binding From Angular Docs. An expression that starts with :: is considered a one-time expression. One-time expressions will stop recalculating once they are stable, which happens after the first digest if the expression result is a non-undefined value (see value stabilization algorithm below). In many situations, the values need to be only shown in … Read more

How to apply multiple template bindings on one element in angular [duplicate]

December 25, 2022 by Tarik

Can’t use two template binding on one element in Angular 2 (like *ngIf and *ngFor). But you can achieve the same by wrapping the element with a span or any other element. It is good to append with an <ng-container> as it is a logical container and it will not get append to the DOM. … Read more

Angular – ng-template with parameter inside ngIf inside ngFor [duplicate]

December 25, 2022 by Tarik

You can do it like : <ul> <li *ngFor=”let link of links”> <ng-container [ngTemplateOutlet]=”link.type == ‘complex’ ?complexLink : simpleLink” [ngTemplateOutletContext]=”{link:link}”> </ng-container> </li> </ul> <ng-template #simpleLink let-link=’link’> Simple : {{ link.name }} </ng-template> <ng-template #complexLink let-link=’link’> Complex : {{ link.name }} </ng-template> WORKING DEMO

Dynamic template reference variable inside ngFor (Angular 9)

December 2, 2022 by Tarik

Template reference variables are scoped to the template they are defined in. A structural directive creates a nested template and, therefore, introduces a separate scope. So you can just use one variable for your template reference <div *ngFor=”let member of members”> <ng-template #popupContent>Hello, <b>{{member.name}}</b>!</ng-template> <button type=”button” class=”btn btn-secondary” [ngbPopover]=”popupContent” popoverTitle=”Fancy content”> I’ve got markup and … Read more

How and where to use ::ng-deep?

November 27, 2022 by Tarik

Usually /deep/ “shadow-piercing” combinator can be used to force a style down to child components. This selector had an alias >>> and now has another one called ::ng-deep. since /deep/ combinator has been deprecated, it is recommended to use ::ng-deep For example: <div class=”overview tab-pane” id=”overview” role=”tabpanel” [innerHTML]=”project?.getContent( ‘DETAILS’)”></div> and css .overview { ::ng-deep { … Read more

Dynamic tabs with user-click chosen components

October 9, 2022 by Tarik

update Angular 5 StackBlitz example update ngComponentOutlet was added to 4.0.0-beta.3 update There is a NgComponentOutlet work in progress that does something similar https://github.com/angular/angular/pull/11235 RC.7 Plunker example RC.7 // Helper component to add dynamic components @Component({ selector: ‘dcl-wrapper’, template: `<div #target></div>` }) export class DclWrapper { @ViewChild(‘target’, {read: ViewContainerRef}) target: ViewContainerRef; @Input() type: Type<Component>; cmpRef: … Read more

What is the equivalent of ngShow and ngHide in Angular 2+?

September 8, 2022 by Tarik

The hidden property can be used for that [hidden]=”!myVar” See also https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden issues hidden has some issues though because it can conflict with CSS for the display property. See how some in Plunker example doesn’t get hidden because it has a style :host {display: block;} set. (This might behave differently in other browsers – I … Read more

How can I use “*ngIf else”?

September 6, 2022 by Tarik

Angular 4 and 5: Using else: <div *ngIf=”isValid;else other_content”> content here … </div> <ng-template #other_content>other content here…</ng-template> You can also use then else: <div *ngIf=”isValid;then content else other_content”>here is ignored</div> <ng-template #content>content here…</ng-template> <ng-template #other_content>other content here…</ng-template> Or then alone: <div *ngIf=”isValid;then content”></div> <ng-template #content>content here…</ng-template> Demo: Plunker Details: <ng-template>: is Angular’s own implementation of … Read more