select and unselect is not working in angular 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);
        }
      )
  }

`

Not sure how are you keeping the value persistent without knowing how your article.showcase works. Add the code block for the function. The reason it's diapering it's because you are setting display to none, I guessing you suppose to update fill color, not set display to none. — Nesar, Sep 18 '19 at 12:28

score 0 · Answer 1 · answered Sep 18 '19 at 12:32

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

select and unselect is not working in angular 7?

1 Answers1