angular
Angular Material mat-table Row Grouping
A very simple answer would be to sort by the GroupID, this will put those rows together in groups. However, I’m guessing you want a header row displayed before each group. You can provide an alternative <mat-row *matRowDef=”… that uses a where clause. This can be used to display a non-default set of columns. The … Read more
Migrating Angular 4.x to Angular 5 [duplicate]
You need to update all angular provided packages to their latest versions as follows: npm install [email protected] –save-dev npm install @angular/common@latest @angular/compiler@latest @angular/compiler-cli@latest @angular/core@latest @angular/forms@latest @angular/http@latest @angular/platform-browser@latest @angular/platform-browser-dynamic@latest @angular/platform-server@latest @angular/router@latest @angular/animations@latest –save This should do all the necessary. Plus you could also update your angular cli that ships with angular 5 as standard version as … Read more
Angular2 Quick Start – ‘Cannot Get’ Message
I got this error when index.html was not in the correct folder. If that is the case, putting it in the main angular project’s root folder should resolve the error.
Angular Material: Hide Autocomplete Panel when User hits enter Key
My use case was slightly different so your update didn’t work for me, but I found a slightly different solution that does the trick: @ViewChild(MatAutocompleteTrigger) autocomplete: MatAutocompleteTrigger; Then you can use this to close the dropdown options: this.autocomplete.closePanel(); Make sure to also import ViewChild: import { ViewChild } from ‘@angular/core’; Works like a charm.
Typescript – set default value for class members
Yes, easily, and you don’t need to add a class constructor. export class Profile extends ServerData { name: string; email: string; age: number = 0; } The ability to define default values is one of the main things that differentiates a class from an interface. For this to work you need to call new Profile() … Read more
Emit a single value
A lot of the stuff is tucked away in: import ‘rxjs/Rx’; You might try Observable.of for a single value. This works for me (plunker): import {Component} from ‘angular2/core’; import {Observable} from ‘rxjs/Observable’; import ‘rxjs/Rx’; @Component({ selector: ‘my-app’, providers: [], template: ` <div> <h2>Hello {{test | async}}</h2> </div> `, directives: [] }) export class App { … Read more
Angular CLI generated app with Web Workers
For Angular 7, see answer below. I spent a lot of time to figure out how to do it, so I hope this can help someone. Preconditions I’m assuming that you have an Angular project (version 2 or 4) generated with Angular CLI 1.0 or higher. It is not mandatory to generate the project with … Read more
Angular Renderer2 remove listener
There is no difference with Renderer: import { Renderer2 } from ‘@angular/core’; export class MyComponent { listenerFn = () => {}; constructor(private renderer: Renderer2) {} ngOnInit() { this.listenerFn = this.renderer.listen(document, ‘mousemove’, () => console.log(‘move’)); } ngOnDestroy() { this.listenerFn(); } }
Angular 2 How to “watch” for tab changes
You could use the (selectedTabChange) event. Check Material2#tabs. Template: <mat-tab-group color=”primary” (selectedTabChange)=”onLinkClick($event)”> … </mat-tab-group> Component: import { MatTabChangeEvent } from ‘@angular/material’; // … onLinkClick(event: MatTabChangeEvent) { console.log({ event }); this.router.navigate([‘contacts’]); }