I have an array that consists of objects, I add this array to HTML using * NGFOR and process an event click to add an active class when you click Add an Active Class.

@ directive ({
 Selector: '[Apphome]'
})
EXPORT CLASS HOMEDITIVE {
 @Hostbinding ('class.Active') isactive = false;
 @Hostlistener ('click') onClick () {
  this.isactive = true;
 }
}

HTML

& lt; li (click) = "show (idx)" class = "week-li" * ngfor = " Let WD of Weekdays; let idx = index "& gt;
        & lt; p class = "week-title" apphome & gt; {{wd.titlename}} & lt; / p & gt;
      & lt; / li & gt;
    & lt; / ul & gt;

everything works fine, click adds the expected class, but when I click on the second element, the previous active class is not deleted, how can it be implemented only with Angular, without Angular JS

Answer 1, Authority 100%

If you do not use the directive, you can do this:

& lt; div * ngfor = "let Item of Array; Let Index = Index" (click) = "ActiveIndex = index "
 [NGCLASS] = "{Active: ActiveIndex === Index}" & gt;
 {{item}}
& lt; / div & gt;

At the same time Index and ActiveIndex it is not necessary to declare in the component, and you can leave them as variables template.