如何在 HTML 按钮单击时打开/显示我​​的组件 - Angular

Question

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

Answer 1

as you said it's simple, in the main component for example you add this:

import {Component, OnInit} from'@angular/core';
export class MainComponent implements OnInit{
  public shoud_open = false;

  openChildComponent(){
   this.should_open = true;
  }

  itemSelected(item){
    console.log(item);
  }

}

in the html of the MainComponent you add:

<button (click)="openChildComponent()">Open</button>
<div *ngIf="shouldOpen">
   <child-component (onItemSelect)="itemSelected($event)" [items]="persons"></child-component>
</div>

now because you are using bootstrap modal, you need to open it programmatically, i assume that you already using JQuery and it's defined somewhere, so in the ChildComponent you do something like this:

import {Component, AfterViewInit, OutPut, Input, EventEmitter} from'@angular/core';
export class ChildComponent implements AfterViewInit{
  @OutPut()
  public onItemSelect: EventEmitter<any>;

  @Input()
  public items: Array<any>; 
  constructor(){
    this.onItemSelect= new EventEmitter<any>();
  }
  ngAfterViewInit(){
    $('#modal_id').modal('show');
  }
  selectItem(item){
   this.onItemSelect.emit(item);
  }
}

in the html code of ChildComponent you add this:

<select multiple name="items" (change)="selectItem($event)">
  <option *ngFor="let item of items" [value]="item">Item</option>
</select>

i didn't test this code, but i'm just giving you example of how you communicate with components, conditionally display them