Trigger focus in elements in angular2

Question

I have a component as (Angular 4.1.0) -

<div id="create1" style="height: auto" materialize>
 <div class="input-field" style="height: auto">
   <textarea id="**create-post**" class="materialize-textarea"></textarea>
   <label for="create-post">Write something ...</label>
 </div>
 <div class="card-action">
  <a class="left"><i class="material-icons">**close**</i> </a>
  <a class="right">Post</a>
 </div>

1.So the problem is when I focus on [ create-post ] element then it should trigger the [ close ] element also, else the [ close ] element should be hidden.

the component css has this -

.input-field textarea:focus {
border-bottom: 1px solid #00b8d4;
box-shadow: 0 1px 0 0 #00b8d4;
**height**: 400px;}

2.although the height :400px but when the content increases of the textarea it should also extend its height! Contents should not become scrollable instead the textarea should increase its height anyone have any idea how to attain this?

Answer 1

You can bind to the focus event in angular directly in your template and connect it to the javascript to do whatever you need to do.

<textarea id="**create-post**" (focus)="doWhatsNeeded()"></textarea>

then in your component declare the function:

doWhatsNeeded(){
    //do something
}