I'm making simple application, there are 3 ponents right now, one Parent ponent, called MAIN COMPONENT, and two child ponents, one of the child ponent 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 ponent) 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 ponent) there should be shown modal (another ponent which holds customers) where I could choose a client.

Component that should shown when add is pressed is: customerponent.html

Now I will post my code:

1.) posting ponent that should hold clients customerponent.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: './customerponent.html',
  styleUrls: ['./customerponent.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 ponent :

<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 ponent when button is clicked..

Thanks Cheers

I'm making simple application, there are 3 ponents right now, one Parent ponent, called MAIN COMPONENT, and two child ponents, one of the child ponent 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 ponent) 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 ponent) there should be shown modal (another ponent which holds customers) where I could choose a client.

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

Now I will post my code:

1.) posting ponent that should hold clients customer.ponent.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.ponent.html',
  styleUrls: ['./customer.ponent.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 ponent :

<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 ponent when button is clicked..

Thanks Cheers

• javascript
• jquery
• angular
• bootstrap-modal
• angular-ponents

Share Improve this question Follow asked Jul 11, 2018 at 21:36 Roxy'ProRoxy'Pro 4,4641010 gold badges4949 silver badges120120 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 0

as you said it's simple, in the main ponent 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-ponent (onItemSelect)="itemSelected($event)" [items]="persons"></child-ponent>
</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 municate with ponents, conditionally display them