{{}} never goes together with [prop]=”…” or (event)=”…” <small class=”form-text text-danger” [hidden]=”!editForm.controls.[‘field_item_exportExpression_’ + i]?.errors?.required” dpTranslate=”dataconfiguration.validation.required”> This field is required. </small>
This problem is solved by implementing HashLocationStrategy which adds # to all your routes. You achieve this by adding HashLocationStrategy to AppModule providers. providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}], and add the corresponding import import { HashLocationStrategy, LocationStrategy } from ‘@angular/common’; This will solve your problem. And if you don’t want to use the HashLocationStrategy, you … Read more
You can wrap ng-content in ng-template and use ngTemplateOutlet <a class=”bouton” href=”https://stackoverflow.com/questions/44699469/{{ href }}” *ngIf=”hasURL”> <ng-container *ngTemplateOutlet=”contentTpl”></ng-container> </a> <button class=”bouton” *ngIf=”!hasURL”> <ng-container *ngTemplateOutlet=”contentTpl”></ng-container> </button> <ng-template #contentTpl><ng-content></ng-content></ng-template> Plunker Example See also How to conditionally wrap a div around ng-content Angular 9 demo
You need to use stopPropagation() for checkbox event: <input type=”checkbox” [ngModel]=”task.taskStatus” (ngModelChange)=”changeTaskStatus($event);$event.stopPropagation()” /> It prevents further propagation of the current event in the capturing and bubbling phases. You can read more here. Also, you probably need to add stopPropagation() to click event of checkbox, but I’m not 100% sure: <input type=”checkbox” [ngModel]=”task.taskStatus” (click)=”$event.stopPropagation()” (ngModelChange)=”changeTaskStatus($event)” />
Not to dirty the code I just coded simple hover-class directive. <span hover-class=”btn-primary” class=”btn” >Test Me</span> Running Sample Code Editor stackblitz Here below the directive, import { Directive, HostListener, ElementRef, Input } from ‘@angular/core’; @Directive({ selector: ‘[hover-class]’ }) export class HoverClassDirective { constructor(public elementRef: ElementRef) { } @Input(‘hover-class’) hoverClass: any; @HostListener(‘mouseenter’) onMouseEnter() { this.elementRef.nativeElement.classList.add(this.hoverClass); } … Read more
I like Eric’s answer better (see his comment for a sample Plunker): <span *ngFor=”let item of items; let isLast=last”> {{item}}{{isLast ? ” : ‘, ‘}} </span> My original answer was to use the optional index in the NgFor microsyntax: <span *ngFor=”#item of items, #i=index”> {{item}}{{i === items.length – 1 ? ” : ‘, ‘}} </span> … Read more
The variable selectedHero is null in the template so you cannot bind selectedHero.name as is. You need to use the elvis operator ?. for this case: <input [ngModel]=”selectedHero?.name” (ngModelChange)=”selectedHero.name = $event” /> The separation of the [(ngModel)] into [ngModel] and (ngModelChange) is also needed because you can’t assign to an expression that uses the elvis … Read more
One can also use this kind of condition: <div [ngStyle]=”myBooleanVar && {‘color’: ‘red’}”></div> It requires a bit less string concatenation…
Using simple autofocus HTML5 attribute works for ‘on load’ scenario <input autofocus placeholder=”enter text” [(ngModel)]=”test”> or <button autofocus (click)=”submit()”>Submit</button> http://www.w3schools.com/TAgs/att_input_autofocus.asp
Specifying pointer-events: none in CSS disables mouse input but doesn’t disable keyboard input. For example, the user can still tab to the link and “click” it by pressing the Enter key or (in Windows) the ≣ Menu key. You could disable specific keystrokes by intercepting the keydown event, but this would likely confuse users relying … Read more