'How can I change the style of an element that is inside my component using a component tag?

I have a html header component like this:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class='MainHeaderContainer'>
  <div class='PictureLogoContainer'>
    <picture>
      <img class="HeaderLogo" src="../../../assets/logo.jpg" alt="logo">
    </picture>
  </div>

  <form class="FormSearchContainer" action="" #Search>
    <select class="SelectSearchForm">
      <option>eat</option>
      <option>Mechanic</option>
      <option>Financial advisor</option>
      <option>Illustrator</option>
    </select>
    <input type="text" placeholder="Search..." name="search">
    <button type="submit"><i class="fa fa-search"></i></button>
  </form>

  <div class="ContainerOptions">
    <div>
      Log in
    </div>
    <div>Register</div>
  </div>
</div>

I want the 'FormSearchContainer' div not to be displayed in a certain case, I thought of using ngClass but it only acts on the inner tags of my component, how can I then affect the style of my inner elements in this component?

I want to be able to do this from the tag of my header component, that is, through my , is this possible?

What my default component generates

What I want to get for a certain case

angular

Solution 1:^[1]

If you have the condition somewhere in component.ts you could use *ngIf to conditionally show/hide (render or not render) that part of the html.

Where isShowing is true or false.

<form class="FormSearchContainer" action="" #Search *ngIf="isShowing">

https://angular.io/api/common/NgIf

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Joosep Parts

'How can I change the style of an element that is inside my component using a component tag?

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]