Passing Value through components in Angular 2

Question

I am using the Ng2Bs3ModalModule to show popup a component. Here for this I am using the following way :

I create a template on the master component as follow

<modal #modal>
    <modal-header [show-close]="true">
        <h4 class="modal-title">Update Job Service</h4>
    </modal-header>
    <modal-body>
        <app-job-service-edit></app-job-service-edit>
    </modal-body>
</modal>

Thereafter, I open this model using the following model.open() in (click) event.

<button type="button" class="flat btn-danger" name="table_records"  (click)="modal.open()">EDIT</button>

Now I need to pass a value to the component by clicking the above button. How do I do this???

Thanks in advance.

Answer 1

You can use another function call to send a value using a semicolumn.

(click)="modal.open();(click)="test('hello')

<button type="button" class="flat btn-danger" name="table_records"  (click)="modal.open();(click)="test('hello')">EDIT</button>

Here is the component example.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  styles: [`
    .app {
      display: block;
      text-align: center;
      padding: 25px;
      background: #f5f5f5;
    }
  `],
  template: `
    <div class="app">
       <a (click)="test('hello')">Click me to alert</a>
    </div>
  `
})
export class AppComponent {


  test(value): void {
  console.log(value)
  alert(value)
}

}

Here is a workinf DEMO