Add class to an element in Angular 4

Question

I was trying to create an image gallery with Angular 4 The logic behind this is to add a Cascading Style Sheet  CSS  class to the selected image that will show a red border on the selected  clicked  image  This is the CSS stylesheet for an image gallery   I want to show a red selection square on the image I have clicked  this-is-a-class should be added to the selected image    container    border 1px solid red    height auto     ul li    margin-right 20px    margin-left 0    list-style-type none    display inline     ul li img    width  200px    height 200px    border 1px solid grey      select    border 2px solid violet      this-is-a-class    border  10px solid red  important      following is the template code   lt div id  container  gt     lt ul gt       lt li gt  lt img class  this-is-a-class  id  1  src        assets images 1 jpg   click   addClass id 1    gt  lt  li gt       lt li gt  lt img id  select  src        assets images 2 png   click   addClass id 2    gt  lt  li gt       lt li gt  lt img id  3  src        assets images 3 jpg   click   addClass id 3    gt  lt  li gt       lt li gt  lt img id  4  src        assets images 4 png   click   addClass id 4    gt  lt  li gt       lt li gt  lt img id  5  src        assets images 5 jpg   click   addClass id 5    gt  lt  li gt     lt  ul gt   lt  div gt    lt div gt     lt h1 gt You Clicked on    id   lt  h1 gt   lt  div gt    The component code is as follows  import   Component  OnInit   from   angular core   import   DataService   from        services data service     Component     selector   app-user     templateUrl     user component html     styleUrls      user component css       export class UserComponent implements OnInit     id  number    constructor         console log  Constructor working             ngOnInit         console log  ngOnInit works               function to add the class to selected image to show the border    addClass id        this id   id        id   this id   selectedImg     null

User · Accepted Answer

Use  ngClass  and conditionally apply class based on the id   In your HTML file    lt li gt       lt img  ngClass     this-is-a-class   id     1    id  1             src        assets images 1 jpg   click   addClass id 1    gt   lt  li gt   lt li gt       lt img  ngClass     this-is-a-class   id     2    id  2             src        assets images 2 png   click   addClass id 2    gt   lt  li gt    In your TypeScript file   addClass id  any        this id   id

User · Answer

If you need that each div will have its own toggle and don t want clicks to affect other divs  do this   Here s what I did to solve this       lt div  ngClass     teaser    teaser 1     click   teaser 1  teaser 1  gt     content     lt  div gt    lt div  ngClass     teaser    teaser 2     click   teaser 2  teaser 2  gt     content     lt  div gt    lt div  ngClass     teaser    teaser 3     click   teaser 3  teaser 3  gt     content     lt  div gt    it requires custom numbering which sucks  but it works

User · Answer

Here is a plunker showing how you can use it with the ngClass directive   I m demonstrating with divs instead of imgs though   Template    lt ul gt         lt li gt  lt div  ngClass     this-is-a-class   selectedIndex    1    click   setSelected 1   gt   lt  div gt  lt  li gt         lt li gt  lt div  ngClass     this-is-a-class   selectedIndex    2    click   setSelected 2   gt   lt  div gt  lt  li gt         lt li gt  lt div  ngClass     this-is-a-class   selectedIndex    3    click   setSelected 3   gt   lt  div gt  lt  li gt   lt  ul gt    TS   export class App     selectedIndex   -1     setSelected id  number        this selectedIndex   id

User · Answer

If you want to set only one specific class  you might write a TypeScript function returning a boolean to determine when the class should be appended   TypeScript  function hideThumbnail   boolean      if     Your criteria here             return true      CSS    request-card-hidden       display  none      HTML    lt ion-note  class request-card-hidden   hideThumbnail    gt  lt  ion-note gt

User · Answer

you can try this without any java script you can do that just by using CSS  img active  img focus  img hover   border  10px solid red  important     of if your case is to add any other css class by clicking you can use query selector like   lt img id  image1  ng-click  changeClass id    gt   lt img id  image2  ng-click  changeClass id    gt   lt img id  image3  ng-click  changeClass id    gt   lt img id  image3  ng-click  changeClass id    gt    in controller first search for any image with red border and remove it then by passing the image id add the border class to that image   scope changeClass   function id   angular element document querySelector   some-class   removeClass   some-class    angular element document querySelector id   addClass   some-class

[css] Add class to an element in Angular 4

Examples related to css

Examples related to angular