title: ngClass and ngStyle directive onclick element color needs to change in angular?
body: <p>Hi every one I have created stackblitz <a href="https://stackblitz.com/edit/angular-fnvhnn-giypgb?file=app%2Fexpansion-overview-example.html" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-fnvhnn-giypgb?file=app%2Fexpansion-overview-example.html</a> for reference, I have used expansion panel to exapand the content, based on click the element the expansion happening in the stackblitz, for example if we click <strong>All</strong> element on top the <strong>all</strong> content will gets exapand, if we click <strong>B</strong> element the <strong>B</strong> content will gets expand.</p>
  <p>What I exactly looking is I want to use <strong>ngstyle or ngclass</strong> in top loop of <strong>{{tab}}</strong>, if we click <strong>All</strong> tag it should be change into <strong>green color</strong> and again if click same <strong>All</strong> tag it's should change into <strong>red color</strong>, if we click <strong>B</strong> tag it should be change into <strong>green color</strong> again if click same <strong>B</strong> tag it's should change into <strong>red color</strong> like toggle.</p>
  <p>if <strong>panelstate = false</strong> the tag should be in red color and if it is <strong>true</strong> it's need to change green color</p>
  <p><strong>panel open state:-</strong></p>
  <pre><code>panelOpenState = false;
  </code></pre>
  <p><strong>Top ngfor loop;-</strong></p>
  <pre><code>&lt;div style=&quot;display: flex;justify-content: space-evenly;&quot;&gt;
      &lt;div *ngFor=&quot;let tab of getTablist();&quot;&gt; &lt;p  (click)='clickOntab(tab)' [ngStyle]=&quot;{'color':panelOpenState === 'true' ? 'green' : 'red' }&quot;&gt;{{tab}}&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p><strong>Ts File</strong></p>
  <pre><code>panelOpenState = false;
    public tabType: string = &quot;&quot;;
      
        clickOntab(tab) {
          if (this.tabType != &quot;&quot; &amp;&amp; this.tabType === tab) {
            this.panelOpenState = false;
            this.tabType = &quot;&quot;;
          } else {
            this.panelOpenState = true;
            this.tabType = tab;
          }
        }
      
        getTablist() {
          const tabList = this.cricketList.map(list =&gt; list.alphabet);
          return [&quot;All&quot;].concat(tabList);
        }
      }
  </code></pre>