show a div when click an input button

Question

I want to show a div in a component when I click on an input button in another component.

For example :

In the add component, I have an input: <input #openDiv> and I need when I click or focus it this to show this component:

<div-component [focus]="openDiv"></div-component>

This is my div-component :

export class divComponent implements OnInit , AfterViewInit {

  @Input() focus: ElementRef;
}

How can I sovle this problem?

Answer 1

Try:

<div-component *ngIf="showDiv"></div-component>

and:

<input #openDiv (focus)="showDiv = true" (click)="showDiv = true" />

Working stackblitz: https://stackblitz.com/edit/angular-s2p2je

Note, you can also use (focusout)="showDiv = false" to hide the div when it loses focus. Further *ngIf removed the element from DOM. If you want to keep the element in your DOM use [hidden]="!showDiv" .