How to call function after dom renders in Angular2

Source: https://stackoverflow.com/questions/31171084/how-to-call-function-after-dom-renders-in-angular2

The only solution I've found with the lifecycle hook ngAfterViewChecked.

Example of a chat where you have to scroll down the messages list after adding and rendering a new message:

import {Component, AfterViewChecked, ElementRef} from 'angular2/core';

@Component({
    selector: 'chat',
    template: `
        <div style="max-height:200px; overflow-y:auto;" class="chat-list">
            <ul>
                <li *ngFor="#message of messages;">
                    {{ message }}
                </li>
            </ul>
        </div>
        <textarea #txt></textarea>
        <button (click)="messages.push(txt.value); txt.value = '';">Send</button>
    `
})

export class ChatComponent implements AfterViewChecked {
    public messages: any[] = [];        
    private _prevChatHeight: number = 0;

    constructor (public element: ElementRef) {
        this.messages = ['message 3', 'message 2', 'message 1'];

        this.elChatList = this.element.nativeElement.querySelector('.chat-list');
    }       

    public ngAfterViewChecked(): void {
        /* need _canScrollDown because it triggers even if you enter text in the textarea */

        if ( this._canScrollDown() ) {
            this.scrollDown();
        }       
    }       

    private _canScrollDown(): boolean {
        /* compares prev and current scrollHeight */

        var can = (this._prevChatHeight !== this.elChatList.scrollHeight);

        this._prevChatHeight = this.elChatList.scrollHeight;

        return can;
    }

    public scrollDown(): void {
        this.elChatList.scrollTop = this.elChatList.scrollHeight;
    }
}

How to change button text and disable button on click event in angular2

Source: https://stackoverflow.com/questions/41489355/how-to-change-button-text-and-disable-button-on-click-event-in-angular2

<button (click)="setSaving($event.target, 'saving')">save</button>

and then in your component:

setSaving(element, text){
  element.textContent = text;
  element.disabled = true;
}

You can also set the properties using the Renderer

Angular @Input() property changes detection

Source: https://ngdev.space/angular-2-input-property-changes-detection-3ccbf7e366d2

import {
	Component, Input,
	OnInit,
	OnChanges, SimpleChanges, SimpleChange
	} from '@angular/core';
	@Component({
	selector: 'my-last-name',
	template: `
	<h2>Last name: {{_name}} ({{ name }})</h2>
	`,
	})
	export class OtherChildComponent implements OnChanges, OnInit {
	@Input() name: string;
	private _name: string;
	constructor() {}
	ngOnChanges(changes: SimpleChanges) {
	const name: SimpleChange = changes.name;
	console.log('prev value: ', name.previousValue);
	console.log('got name: ', name.currentValue);
	this._name = name.currentValue.toUpperCase();
	}
	ngOnInit() {
	console.log('on init');
	console.log(this.name);
	}
	}

Angular2 Doing an else with ngClass

Source: https://stackoverflow.com/questions/38203030/angular2-doing-an-else-with-ngclass/38203292

Indeed

<p class="{{condition ? 'checked' : 'unchecked'}}">

or

<p [ngClass]="condition ? 'checked' : 'unchecked'">

or

<p [ngClass]="[condition ? 'checked' : 'unchecked']">

How to format date as dd/MM/yyyy in Angular 2 using pipes on template?

Source: https://stackoverflow.com/questions/35754586/how-to-format-date-as-dd-mm-yyyy-in-angular-2-using-pipes

Now we can do the conventional way:

{{valueDate | date: 'dd/MM/yyyy'}}