Binding events when using a ngForTemplate in Angular 2

Been looking for an answer to this for a week now and I finally came up with a pretty decent solution. Instead of using ngForTemplate I would suggest using ngTemplateOutlet. It is already described pretty well here: angular2 feeding data back to `<template>` from `[ngTemplateOutlet]` The custom template for the list items is placed between … Read more

Do we need to unsubscribe from observable that completes/errors-out?

The Subscribing and Unsubscribing section of the Observable Contract is definitive regarding your question. It states: When an Observable issues an OnError or OnComplete notification to its observers, this ends the subscription. Observers do not need to issue an Unsubscribe notification to end subscriptions that are ended by the Observable in this way. This is … Read more

Share data between components using a service in Angular2

camaron is right. Your mistake is that you declare UtilityService twice: Once in the providers of SearchComponent. Once in the providers of TransferComponent. You should declare the service ONLY ONCE to make sure both components get the same instance. For this you can choose between either of these options: Declare the service in the providers … Read more

Filtering specific column in Angular Material Table with filtering in angular?

You have to override the filterPredicate of your dataSource. Here’s an example of how to do it: Working demo Essentially, you want to specify what properties in your data the filter is applied to: this.dataSource.filterPredicate = function(data, filter: string): boolean { return || data.symbol.toLowerCase().includes(filter) || data.position.toString().includes(filter); };

How to use angular2 built-in date pipe in services and directives script files [duplicate]

Since CommonModule does not export it as a provider you’ll have to do it yourself. This is not very complicated. 1) Import DatePipe: import { DatePipe } from ‘@angular/common’; 2) Include DatePipe in your module’s providers: NgModule({ providers: [DatePipe] }) export class AppModule { } or component’s providers: @Component({ selector: ‘home’, styleUrls: [‘./home.component.css’], templateUrl: ‘./home.component.html’, … Read more

Set style dynamically in Angular

[style.background-color]=”activity.status == ‘Pending’ ? ‘red’ : ‘green'” or [ngStyle]=”{‘backgroundColor’: activity.status == ‘Pending’ ? ‘red’ : ‘green’ }” For your rendering result see also In RC.1 some styles can’t be added using binding syntax

Angular Material2 theming – how to set app background?

If you want to change the theme’s background color for the entire app in a clean way, you can override your theme with the following. // Set custom background color $custom-background-color: map_get($mat-blue-grey, 50); // -or- Can set colour by hex value too $custom-background-color: #628cc9; $background: map-get($theme, background); $background: map_merge($background, (background: $custom-background-color)); $theme: map_merge($theme, (background: $background)); … Read more