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
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
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’]); }
ionViewWillEnter vs ionViewDidEnter
sebaferreras answer is great but it is missing some points. First, about ionic life cycle. If you write down all ionic events and put a console.log in each, you will see the scenario: constructor –> ionViewDidLoad –> ionViewWillEnter –> ionViewDidEnter –> ionViewWillLeave –> ionViewDidLeave –> ionViewWillUnload. constructor run first when the page is initiated. This … Read more
How to get angular2 [innerHtml] to work [duplicate]
Angular uses {{property}} for interpolation of values. That is the way that you would display plain text in your div, like so Solution 1: <div class=”blog-post”>{{testhtml}}</div> But that will write out text, not HTML. For HTML, you will need to bind to the property Solution 2: <div class=”blog-post” [innerHtml]=”testhtml”></div> Note I moved the [innerHtml] to … Read more
MatDatePicker start week on monday
You have to build a custom DateAdapter. A custom DateAdapter is a class which implements the DateAdapter interface (it’s actually an abstract class that should be extended). It must have a bunch of predefined function implementations and have to be registered as a useClass for the DateAdapter provider. providers: [{provide: DateAdapter, useClass: CustomDateAdapter }] The … Read more