რეაქტიულობა Angular-ში

საჯარო თვისებების ნებისმიერი ცვლილების შემთხვევაში, თემფლეითი რეაქტიულად რეაგირებს, ანუ მყისიერად იცვლება. ასე მუშაობს რეაქტიულობა Angular-ში.

მოდით შევხედოთ მაგალითს. დავუშვათ, გვაქვს თვისება, რომელიც შეიცავს ტექსტს:

export class AppComponent {
	public text: string = '';
}

გამოვიტანოთ ჩვენი თვისება რაიმე ტეგში:

<div>
	{{ text }}
</div>

ახლა გავაკეთოთ ღილაკი, რომელზე დაწკაპუნებით გამოიძახება კლასის მეთოდი:

<button (click)="show()">
	show
</button>

ამ მეთოდში შევცვალოთ ტექსტი:

export class AppComponent {
	public text: string = '';
	
	public show(): void {
		this.text = 'hello';
	}
}

ახლა, თუ გაუშვებთ კოდს და დააწკაპუნებთ ღილაკს, დაწკაპუნებისთანავე შეიცვლება ტექსტი div-ში.

გააკეთეთ div და ორი ღილაკი. გახადეთ ისე, რომ პირველ ღილაკზე დაწკაპუნებისას div-ში შევიდეს ერთი ტექსტი, ხოლო მეორეზე დაწკაპუნებისას - სხვა ტექსტი.