Angular හි කොන්දේසි අනුව ප්රතික්රියාශීලී බව
ngIf සමඟ ද ප්රතික්රියාශීලී බව ක්රියාත්මක වේ.
මෙයින් අදහස් කරන්නේ පන්ති ගුණයක අඩංගු දේ මත පදනම්ව
අපට ගොනුවක් පෙන්වන්න හෝ සඟවන්න පුළුවන් බවයි.
අපි එය ප්රායෝගිකව උත්සාහ කරමු. අප සතුව පහත ගොනුව ඇතැයි සිතමු
<div>
text
</div>
කොන්දේසියකට අනුව එය පෙන්වන්න හෝ සඟවන්න අපි කරමු:
<div *ngIf="isShow">
text
</div>
දැන් බොත්තම් දෙකක් සාදමු. පළමු එක ක්ලික් කිරීමෙන් අපගේ ගොනුව පෙන්වමු, සහ දෙවැන්න ක්ලික් කිරීමෙන් - සඟවමු:
<button (click)="show()">
show
</button>
<button (click)="hide()">
hide
</button>
ගොනුව පෙන්වන ලදී ද නැද්ද යන්න නියාමනය කරන ගුණයක් අංග සංරචක පන්තියට එකතු කරමු:
export class AppComponent {
public isShow: boolean = true;
}
දැන් අපගේ ගොනුව පෙන්වීම සහ සඟවීම සඳහා වූ ක්රමවල අවස්ථානුකූල කිරීම ලියමු:
export class AppComponent {
public isShow: boolean = true;
public show(): void {
this.isShow = true;
}
public hide(): void {
this.isShow = false;
}
}
ගොනුව සඟවා ඇත්නම් පෙන්වන, පෙන්වා ඇත්නම් සඟවන බොත්තමක් සාදන්න.
