Question: I'm working on my weather web application. When user type his city in search bar, the app show 5 days forecast. Need to set button to save the city in browser storage or cookie. When user refresh the web, automatic loading his favorite city. 

This is my html:

```
<div id="search">
    <input type="text" id="serach-city-input">
    <a id="search-city-button" class="btn btn-danger">Search</a>
</div>

```

And JS for connecting with API:

```
$('#search-city-button').on('click', () => {
    const searchString = $('#serach-city-input').val();
    weatherPage.render(searchString);
    weatherPage.renderThreeHours(searchString);
});

```

Answer: 
If you move the button inside of the `a`-tag and style it to take the complete available width and height, you should be able to get what you want:

MyComponent template:

```
<a class="item-description" routerLink="/details/{{item.getId()}}">
  {{item.getDescription()}}
  <button mat-icon-button (click)="deleteItem(); $event.stopPropagation();"><mat-icon>delete</mat-icon></button>
</a>

```

MyComponent CSS

```
::ng-deep my-component-selector{
    display:flex; 
    flex-grow:1;
}
a{
  display:inline-block;
  width:100%;
}

```

I've created a quick'n'dirty [Stackblitz](https://stackblitz.com/edit/angular-ji7wbg).
you can use click event on the component, it will call the action once you click on the component

```
 <my-component-selector class="myItem" [item]="item" (click)="DoSth($event)"></my-component-selector>

```