CODEWITHSUNDEEP
javascriptangulartypescript
kianoush dortaj
kianoush dortaj

Reputation: 81

show a div when click an input button

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?

Upvotes: 1

Views: 73

Answers (1)

Z. Bagley
Z. Bagley

Reputation: 9260

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".

Upvotes: 1

Related Questions