Angular හි කොන්දේසි අනුව ප්‍රතික්‍රියාශීලී බව

ngIf සමඟ ද ප්‍රතික්‍රියාශීලී බව ක්‍රියාත්මක වේ. මෙයින් අදහස් කරන්නේ පන්ති ගුණයක අඩංගු දේ මත පදනම්ව අපට ගොනුවක් පෙන්වන්න හෝ සඟවන්න පුළුවන් බවයි.

අපි එය ප්‍රායෝගිකව උත්සාහ කරමු. අප සතුව පහත ගොනුව ඇතැයි සිතමු

app/app.component.html<div>
  text
</div>

කොන්දේසියකට අනුව එය පෙන්වන්න හෝ සඟවන්න අපි කරමු:

app/app.component.html<div *ngIf="isShow">
  text
</div>

දැන් බොත්තම් දෙකක් සාදමු. පළමු එක ක්ලික් කිරීමෙන් අපගේ ගොනුව පෙන්වමු, සහ දෙවැන්න ක්ලික් කිරීමෙන් - සඟවමු:

app/app.component.html<button (click)="show()">
  show
</button>
<button (click)="hide()">
  hide
</button>

ගොනුව පෙන්වන ලදී ද නැද්ද යන්න නියාමනය කරන ගුණයක් අංග සංරචක පන්තියට එකතු කරමු:

app/app.component.tsexport class AppComponent {
  public isShow: boolean = true;
}

දැන් අපගේ ගොනුව පෙන්වීම සහ සඟවීම සඳහා වූ ක්‍රමවල අවස්ථානුකූල කිරීම ලියමු:

app/app.component.tsexport class AppComponent {
  public isShow: boolean = true;
  
  public show(): void {
    this.isShow = true;
  }
  public hide(): void {
    this.isShow = false;
  }
}