2

I know what the host element for a directive is the element in which the directive applies. But I don't understand what is the host element for a component.

My code is working, but I can't get how it works.

this is my code

@Component({
  selector: 'ec-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HeaderComponent implements OnInit {
  public size!: 's' | 'm';

  public isAuth!: Observable<boolean>;

  constructor(private router: Router, private store: Store) {
    this.getSize();
  }

  public ngOnInit(): void {
    this.isAuth = this.store.select(selectIsAuth);
  }

  **@HostListener('window:resize')
  public onResize(): void {
    this.getSize();
  }**

  private getSize(): void {
    this.size = window.innerWidth < 1024 ? 's' : 'm';
  }
Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
Raji
  • 19
  • 2
  • 1
    Does this answer your question? [@HostBinding and @HostListener: what do they do and what are they for?](https://stackoverflow.com/questions/37965647/hostbinding-and-hostlistener-what-do-they-do-and-what-are-they-for) – Heretic Monkey Aug 21 '23 at 18:44
  • 3
    The component itself, unless you specify something different in the argument (like the example's `'window:resize'`). – Heretic Monkey Aug 21 '23 at 18:45
  • 2
    @HereticMonkey thank you so much for the answer. Now i more uderstand how it works! – Raji Aug 21 '23 at 19:32

0 Answers0