Angular में सशर्त प्रतिक्रियाशीलता

प्रतिक्रियाशीलता ngIf स्थितियों के साथ भी काम करेगी। इसका मतलब है कि हम कक्षा की संपत्ति में जो कुछ भी निहित है उसके आधार पर ब्लॉक को दिखा या छिपा सकते हैं।

आइए व्यवहार में कोशिश करते हैं। मान लें कि हमारे पास निम्नलिखित ब्लॉक है

app/app.component.html<div>
  पाठ
</div>

आइए इसे एक शर्त के आधार पर दिखाएं या छिपाएं:

app/app.component.html<div *ngIf="isShow">
  पाठ
</div>

आइए अब दो बटन बनाते हैं। पहले बटन पर क्लिक करने पर हमारा ब्लॉक दिखाएं, और दूसरे बटन पर क्लिक करने पर - छिपाएं:

app/app.component.html<button (click)="show()">
  दिखाएं
</button>
<button (click)="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;
  }
}