angular

What is let-* in Angular 2 templates?

by

I came across a strange assignment syntax inside an Angular 2 template. <template let-col let-car=”rowData” pTemplate=”body”> <span [style.color]=”car[col.field]”>{{car[col.field]}}</span> </template> It appears that let-col and let-car=”rowData” create two new variables col and car that can then be bound to inside the template. Source: https://www.primefaces.org/primeng/#/datatable/templating What is this magical let-* syntax called? How does it work? What … Read more

Angular: How to update queryParams without changing route

by

I am trying to update (add, remove) queryParams from a component. In angularJS, it used to be possible thanks to : $location.search(‘f’, ‘filters[]’); // setter $location.search()[‘filters[]’]; // getter I have an app with a list that the user can filter, order, etc and I would like to set in the queryParams of the url all … Read more

What is the difference between parentheses, brackets and asterisks in Angular2?

by

I have been reading the Angular 1 to 2 quick reference in the Angular website, and one thing I didn’t completely understand was the difference between these special characters. For example one that uses asterisks: <tr *ngFor=”#movie of movies”> <td>{{movie.title}}</td> </tr> I understand here that the hash (#) symbol defines movie as a local template … Read more

Angular 2 beta.17: Property ‘map’ does not exist on type ‘Observable’

by

I just upgraded from Angular 2 beta16 to beta17, which in turn requires rxjs 5.0.0-beta.6. (Changelog here: https://github.com/angular/angular/blob/master/CHANGELOG.md#200-beta17-2016-04-28) In beta16 all was working well regarding Observable/map functionality. The following errors appeared after I upgraded and occur when typescript attempts to transpile: Property ‘map’ does not exist on type ‘Observable’ (anywhere where I’ve used map with … Read more

How to load external scripts dynamically in Angular?

by

I have this module which componentize the external library together with additional logic without adding the <script> tag directly into the index.html: import ‘http://external.com/path/file.js’ //import ‘../js/file.js’ @Component({ selector: ‘my-app’, template: ` <script src=”http://iknow.com/this/does/not/work/either/file.js”></script> <div>Template</div>` }) export class MyAppComponent {…} I notice the import by ES6 spec is static and resolved during TypeScript transpiling rather than … Read more

Angular 2 Show and Hide an element

by

I’m having a problem hiding and showing an element depending of a boolean variable in Angular 2. this is the code for the div to show and hide: <div *ngIf=”edited==true” class=”alert alert-success alert-dismissible fade in” role=”alert”> <strong>List Saved!</strong> Your changes has been saved. </div> the variable is “edited” and it’s stored in my component: export … Read more

Angular 2 – innerHTML styling

by

I am getting chunks of HTML codes from HTTP calls. I put the HTML blocks in a variable and insert it on my page with [innerHTML] but I can not style the inserted HTML block. Does anyone have any suggestion how I might achieve this? @Component({ selector: ‘calendar’, template: ‘<div [innerHTML]=”calendar”></div>’, providers: [HomeService], styles: [`h3 … Read more

How to manage Angular2 “expression has changed after it was checked” exception when a component property depends on current datetime

by

My component has styles that depend on current datetime. In my component I’ve got the following function. private fontColor( dto : Dto ) : string { // date d’exécution du dto let dtoDate : Date = new Date( dto.LastExecution ); (…) let color = “hsl( ” + hue + “, 80%, ” + (maxLigness – … Read more

take(1) vs first()

by

I found a few implementation of AuthGuards that use take(1). In my project, I used first(). Do both work the same way? import ‘rxjs/add/operator/map’; import ‘rxjs/add/operator/first’; import { Observable } from ‘rxjs/Observable’; import { Injectable } from ‘@angular/core’; import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from ‘@angular/router’; import { AngularFire } from ‘angularfire2’; @Injectable() export … Read more