This you should get what you want: @Component({ selector: ‘ul[my-list]’, template: ` <ng-content></ng-content> ` }) export class MyList { } @Component({ selector: ‘li[my-item]’, template: ` <ng-content></ng-content> ` }) export class MyItem { … } <ul my-list> <li my-item>One</li my-item> <li my-item>Two</li my-item> </ul my-list>
My pull-request has been merged. With the upcoming release of Angular CLI v9.1.0 a new option is going to be available: –displayBlock=true|false Docs: https://next.angular.io/cli/generate#component For the impatient: It’s available right now in v9.1.0-next.0 When using the CLI: ng generate component dashboard –displayBlock=true Settting a default value in angular.json: … “projectType”: “application”, “schematics”: { “@schematics/angular:component”: { … Read more
According to angular 5 changelog: The compiler option enableLegacyTemplate is now disabled by default as the element was deprecated since v4. Use <ng-template> instead. So you should use ng-template instead of template: <ng-template #tpl> <h1>ViewContainerRef</h1> </ng-template> Stackblitz Example or set enableLegacyTemplate to true: platformBrowserDynamic().bootstrapModule(AppModule, { enableLegacyTemplate: true }) Stackblitz Example But you should know that … Read more
<form [formGroup]=”form” (ngSubmit)=”onSubmit(form.value)” class=”form-horizontal”> <div class=”form-group row”> <label for=”inputEmail3″ class=”col-sm-4 “>Username</label> <div class=”col-sm-8″> <input formControlName=”email” type=”text” class=”form-control” id=”inputEmail3″ placeholder=”Email Address” [readonly]=”isReadOnly”> </div> </div> </form> please try like this change [formControl] to formControlName. And to set the output to the input field please do the following, point the line this.form.patchValue import { Component } from ‘@angular/core’; … Read more
You can just write: *ngIf=”testvar !== undefined”
Use either: <a href=”https://www.domainname.com/?q={{text.id}}”>URL</a> or (from the official docs): <a [href]=”‘https://www.domainname.com/?q=’ + text.id”>URL</a> Regarding the question, it’s important to notice: The error message is misleading. When you use {{ expression }}, angular will evaluate the expression and place its value right where the {{}} is. So you don’t need to + the result of {{}} … Read more
As far as i know it is not possible using ng-content, but you can provide parameters to the template. So it’s possible to pass another NgTemplate, which can again be used with an NgTemplateOutlet inside the original template. Here’s a working example: <ng-container *ngTemplateOutlet=”tpl, context: {$implicit: paramTemplate}”> </ng-container> <ng-template #paramTemplate> <span>Hello</span> </ng-template> <ng-template #tpl let-param> … Read more
The only response is let elem:Element = document.getElementById(“myProgrammaticallyChosenIndex”) No other angular weird ceremony needed Tested on angular 4+
You can use @ViewChild with a div by adding a TemplateRef. Template <div id =”myId” #myId> Component import { Component, ViewChild, ElementRef, AfterViewInit } from ‘@angular/core’; @Component({ selector: ‘app-root’, templateUrl: ‘./app.component.html’, styleUrls: [‘./app.component.css’] }) export class AppComponent implements AfterViewInit { @ViewChild(‘myId’) myId: ElementRef; constructor() { } ngAfterViewInit() { console.log(this.myId.nativeElement); } } This blog post by … Read more
Based on the comment of @nsinreal I found an answer. I find it to be a bit abstruse, so I’m trying to post it here: The answer is to work with ng-template and *ngTemplateOutlet. In the my-wrapper component, set up the template like this (my-wrapper.component.html): <div (click)=”toggleDetail()”>Click for more</div> <div *ngIf=”showDetail” [hidden]=”!isInitialized”> <ng-container *ngTemplateOutlet=”detailRef”></ng-container> </div> … Read more