angular2-template – Page 6

Pass variable to custom component

January 26, 2023 by Tarik

You need to add Input property to your component and then use property binding to pass value to it: import { Component, Input } from ‘@angular/core’; @Component({ selector: ‘my-custom-component’, templateUrl: ‘./my-custom-component.html’, styleUrls: [‘./my-custom-component.css’] }) export class MyCustomComponent { @Input() customTitle: string; constructor() { console.log(‘myCustomComponent’); } ngOnInit() { console.log(this.customTitle); } } And in your template: <my-custom-component … Read more

Angular 2: How to write a for loop, not a foreach loop

January 25, 2023 by Tarik

You could dynamically generate an array of however time you wanted to render <li>Something</li>, and then do ngFor over that collection. Also you could take use of index of current element too. Markup <ul> <li *ngFor=”let item of createRange(5); let currentElementIndex=index+1″> {{currentElementIndex}} Something </li> </ul> Code createRange(number){ // return new Array(number); return new Array(number).fill(0) .map((n, … Read more

Angular2 multiple router-outlet in the same template

January 14, 2023 by Tarik

yes you can, but you need to use aux routing. you will need to give a name to your router-outlet: <router-outlet name=”auxPathName”></router-outlet> and setup your route config: @RouteConfig([ {path:”https://stackoverflow.com/”, name: ‘RetularPath’, component: OneComponent, useAsDefault: true}, {aux:’/auxRoute’, name: ‘AuxPath’, component: SecondComponent} ]) Check out this example, and also this video. Update for RC.5 Aux routes has … Read more

How to pass a string value to a component in angular2

January 13, 2023 by Tarik

String literals can be passed in different ways: <component inputField=”string”></component> <component [inputField]=”‘string'”></component> <component inputField=”{{‘string’}}”></component>

How to implement ngModel on custom elements?

January 9, 2023 by Tarik

[(ngModel)]=”item” is a shorthand for [ngModel]=”item” (ngModelChange)=”item = $event” That means that if you want to add a 2-way bind property to your component, for example <app-my-control [(myProp)]=”value”></app-my-control> All you need to do in your component is add @Input() myProp: string; // Output prop name must be Input prop name + ‘Change’ // Use in … Read more

Angular2 *ngIf check object array length in template

January 8, 2023 by Tarik

<div class=”row” *ngIf=”teamMembers?.length > 0″> This checks first if teamMembers has a value and if teamMembers doesn’t have a value, it doesn’t try to access length of undefined because the first part of the condition already fails.

OrderBy pipe issue

December 30, 2022 by Tarik

I modified @Thierry Templier’s response so the pipe can sort custom objects in angular 4: import { Pipe, PipeTransform } from “@angular/core”; @Pipe({ name: “sort” }) export class ArraySortPipe implements PipeTransform { transform(array: any, field: string): any[] { if (!Array.isArray(array)) { return; } array.sort((a: any, b: any) => { if (a[field] < b[field]) { return … Read more

Angular2 disable button

December 22, 2022 by Tarik

Update I’m wondering. Why don’t you want to use the [disabled] attribute binding provided by Angular 2? It’s the correct way to dealt with this situation. I propose you move your isValid check via component method. <button [disabled]=”! isValid” (click)=”onConfirm()”>Confirm</button> The Problem with what you tried explained below Basically you could use ngClass here. But … Read more

How can I use ngFor to iterate over Typescript Enum as an array of strings

December 20, 2022 by Tarik

You can just use the “keyvalue” pipe introduced in Angular 6.1. <p *ngFor=”let enum of TestEnum | keyvalue”> {{ enum.key }} – {{ enum.value}} </p> See here for a full example -> https://stackblitz.com/edit/angular-gujg2e

NgFor doesn’t update data with Pipe in Angular2

December 17, 2022 by Tarik

To fully understand the problem and possible solutions, we need to discuss Angular change detection — for pipes and components. Pipe Change Detection Stateless/pure Pipes By default, pipes are stateless/pure. Stateless/pure pipes simply transform input data into output data. They don’t remember anything, so they don’t have any properties – just a transform() method. Angular … Read more