Pass parameters with EventEmitter

Source: https://stackoverflow.com/questions/35390765/pass-parameters-with-eventemitter

@Output() stopSort = new EventEmitter();

EventEmitter supports one argument, which is passed as $event to your event handler.

Wrap your parameters in an event object when you pass it to emit:

this.stopSort.emit({ event:event, ui: ui });

Then, when you handle the event, use $event:

stopSort($event) { 
  alert('event param from Component: ' +$event.event);
  alert('ui param from Component: ' + $event.ui);
}

The .subscribe() method accepts 3 callbacks

Source: https://stackoverflow.com/questions/42238819/angular-2-how-to-call-a-function-after-get-a-response-from-subscribe-http-post

// The .subscribe() method accepts 3 callbacks
    .subscribe(
      // The 1st callback handles the data emitted by the observable.
      // In your case, it's the JSON data extracted from the response.
      // That's where you'll find your total property.
      (jsonData) => {
        this.send_categories(jsonData.total);
      },
      // The 2nd callback handles errors.
      (err) => console.error(err),
      // The 3rd callback handles the "complete" event.
      () => console.log("observable complete")
    );

Angular 4 remove required validator conditionally

Source: https://stackoverflow.com/questions/46488078/angular-4-remove-required-validator-conditionally

if you want to add validation try this one.

saveDraft() {
   this.form.get('title').setValidators([Validators.required, Validators.minLength(3)]);
   this.form.get('title').updateValueAndValidity();
}

if you want to remove validators try this one.

saveDraft() {
 this.form.get('title').clearValidators();
 this.form.get('title').updateValueAndValidity();
}

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'}}