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

  

    ×
    
Clients
  
  

    
Find client by ID
    

      
      

        
          Search for client..
          Person 1
          Person 2
          Person 3
        
      
    
  
  

    
  




@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 :

 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