How to open/show my component on a HTML button click - Angular

I'm making simple application, there are 3 components right now, one Parent component, called MAIN COMPONENT, and two child components, one of the child component is displaying selected vehicles and that works fine, but after selection is done I need to click on add button in my app, to open modal (which is another component) where I should choose a customer/client so I could mark that vehicle's are selected customers ownership.

This is how it looks in general:



So basically when add button is clicked (that add button is part of toolbox component) there should be shown modal (another component which holds customers) where I could choose a client.

Component that should shown when add is pressed is: customer.component.html

Now I will post my code:

1.) posting component that should hold clients customer.component.html

<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Clients</h4>
</div>
<div class="modal-body item-edit-container">
<h4 class="modal-title" style="text-align: center;">Find client by ID</h4>
<div class="form-group">
<input type="text" class="form-control dash-form-control" id="" placeholder="" autofocus>
<div style="margin-top: 10px;">
<select class="form-control dash-form-control select2" style="width: 100%;">
<option selected disabled>Search for client..</option>
<option>Person 1</option>
<option>Person 2</option>
<option>Person 3</option>
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn save-keyboard-btn" data-dismiss="modal"></button>
</div>
</div>



@Component({
selector: 'app-customer',
templateUrl: './customer.component.html',
styleUrls: ['./customer.component.css']
})
export class ClientComponent implements OnInit {
ngOnInit() {
}
}


I general I've no idea how this should be done, maybe I should place something like this on my main component :

<app-customer></app-customer> and somehow show it when I click on button add, but I really don't know how to achieve this? Could anyone write me some simple steps which I might follow or whatever...


Thanks guys Cheers

So please keep in mind my question at the end is simple, I need to show a modal which represeting my component when button is clicked..

Thanks Cheers

Continue reading...