选择和取消选择在角度7中不起作用？

Question

Hi am making a filter by selecting a icon it highlighted the section and after unselect it doesn't highlighted it but when i select it it works fine but on unselect its icon is disappeared and also it is still selected when i refresh the page, please check this images for reference when selected and when i unselect it and when i refresh the page it show like this

here is my working code

HTML Code -

<div class="flexcell">
 <a *ngIf="data.showcase==1||helper.checkArticleArray(showcasearticle,data.articleid)"
             href="javascript:void(0);"
            (click)="setShowcase(data.articleid,$event)"><svg
             xmlns="http://www.w3.org/2000/svg" width="18" height="18"
             viewBox="0 0 18 18">
           <g id="Group_35" data-name="Group 35"
           transform="translate(-556 -363)">
           <rectid="Rectangle_37" data-name="Rectangle 37"
           width="18" height="18" rx="2"
           transform="translate(556 363)" fill="#2262a0" />
          <path id="star" />
     </g>
     </svg></a> 

Here is my Node code

showcase(articleid,articlepara){

return this.http.post<any>(this.SERVERURL + this.AppSettings.showcase, {articleid: articleid, articlepara : articlepara});

}

and Here is my .ts file

   `setShowcase(articleid, event) {
    event.currentTarget.style.display = "none";

    this.article.showcase(articleid, this.articlepara)
      .subscribe(
        res => {
          //console.log(res);
          this.showcasearticle.push(res.articleid);
          console.log(this.showcasearticle);

        },
        err => {
          console.log(err);
        }
      )
  } 

`

Answer 1

You are setting event.currentTarget.style.display = "none"; which is causing it to disappear. What you need is to replace the fill color. You can refer to this to know more about svg manipulation in angular Angular: transclusion, set color of SVG element