Angular හි සැරසිලි සක්‍රීයව වෙනස් කිරීම

ngClass සහ ngStyle උපදෙස් භාවිතයෙන්, අපට ප්‍රකාශන අංග සමඟ බැඳිය හැකිය, එමඟින් අපගේ සැරසිලි සක්‍රීයව වෙනස් වේ.

active ගුණාංගය භාවිතයෙන් පෙළ සැඟවීම හෝ පෙන්වීම කරමු අංගයේ පන්තිය:

app/app.component.tsexport class AppComponent {
  active: boolean = true;
  
  toggle() {
    this.active = !this.active;
  }
}

මේ සඳහා, අපි toggle ක්‍රියාවලිය ලියමු, එය මෙම ගුණාංගය මාරු කරයි:

app/app.component.tsexport class AppComponent {
  active: boolean = true;
  
  toggle() {
    this.active = !this.active;
  }
}

අංගයේ CSS ගොනුවේ, පහත සැරසිලි පන්තියට අර්ථ දක්වමු:

app/app.component.css.hidden {
  display: none;
}

අංගයේ අච්චුවෙහි div එකක් සාදා, එයට CSS පන්තිය hidden එකතු කරමු, එය අංග පන්තියේ ඇති active ගුණාංගය අනුව සක්‍රීය හෝ නිෂ්ක්‍රීය වේ:

app/app.component.html<div [ngClass]="{hidden: active}">
  text
</div>

අපි බොත්තමක් ද සාදමු, එය ඔබලන විට toggle ක්‍රමය ක්‍රියාත්මක වී, අපගේ අංගය පෙන්වන හෝ සඟවන:

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