Ng Bootstrap-如何从另一个组件另一个组件调用模式组件？

Question

I am a newbie and learning angular . I have a background of angularjs . I have structure of my app like this.

// src /
//  app /
//       app-footer
//                  app-footer.component.css , app-footer-component.html,app-footer.component.ts
//       app-header
//                 app-header.component.css,app-header.component.html,app-header.ts           
//       home
//            home.component.css,home.component.html,home.component.ts
//       shared 
//              modals
//                    todo
//                         update-todo.css,update-todo.html,update-todo.ts

I am using ng-bootstrap and with the help of it i am showing a modal on click. My home.component.html looks like this.

<div class="container home-page">
<div class="jumbotron text-center">
  <h1>I'm a Todo-aholic
  </h1>
</div>
<div id="todo-form" class="row">
  <div class="mx-auto col-sm-8 text-center">
    <form action="">
      <div class="form-group">
        <input type="text" name="something" [(ngModel)]="todo"  class="form-control input-lg text-center"  placeholder="I want to buy a puppy that will love me forever">
        <div class="add-button-todo-app">
          <button class="btn btn-primary" (click)="pushInTodoArr(todo) " [disabled]="todo =='' ? true : false">ADD</button>
        </div>
      </div>
    </form>
  </div>
</div>
<div class="list-of-todos">
  <ul>
    <li *ngFor="let item of todoArray;let i=index">
      <span class="tick">
        <i class="fa fa-check" aria-hidden="true"></i>
      </span>
      {{item}}
      <span class="trash" (click)="removeItemInTodoArr(item);">
        <i class="fa fa-trash" aria-hidden="true"> </i>
      </span>
      <span class="trash" (click)="content.openLg(content)">
        <i class="fa fa-pencil" aria-hidden="true"> </i>
      </span>
    </li>
  </ul>
</div>

<update-todo></update-todo>

and app.component.ts looks like this.

    import { Component, OnInit } from '@angular/core';
import { NgbdModalOptions } from '../shared/modals/todo/update-todo';


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

  /* todo array list */
  todoArray: String[] = [];
  todo: string = "";

  constructor() {

  }

  ngOnInit() {
  }

  /* Push data in todo array */
  pushInTodoArr(value) {
    this.todoArray.push(value);
    this.todo = '';
  }

  /* remove item in array */
  removeItemInTodoArr(key) {
    for (var i = this.todoArray.length - 1; i >= 0; i--) {
      if (this.todoArray[i] === key) {
        this.todoArray.splice(i, 1);
      }
    }
  }

  /* update item in array */
  updateItemInTodoArr(key,updatedValue) {
    for (var i = this.todoArray.length - 1; i >= 0; i--) {
      if (this.todoArray[i] === key) {
        this.todoArray[i] = updatedValue;
      }
    }
  }
}

Its basically a todo app. Which adds delete and updates. I want to update the field in modal.

This is my update-todo.ts .

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

import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'update-todo',
  templateUrl: './update-todo.html',
  encapsulation: ViewEncapsulation.None,
  styleUrls: ['./update-todo.css']
})
export class NgbdModalOptions {
  closeResult: string;

  constructor(private modalService: NgbModal) {}

  openLg(content) {
    this.modalService.open(content, { size: 'lg' });
  }

}

Now I want to open the pop up and pass the value on click update icon. i am calling this function (click)="content.openLg(content)" but i get Cannot read property 'openLg' of undefined .

Will some one please point me to right direction. I am stumbling between ng-bootstrap , ngx-bootstrap and ng2-bootstrap . But i want to do it with ng-bootstrap .

Answer 1

This is how I did it in my app: Import:

import { NgbModal, NgbModalOptions } from '@ng-bootstrap/ng-bootstrap';

constructor:

constructor(        
        private _modalService: NgbModal
    ) { }

Call:

onEdit(car: ICars) {
        const modalRef = this._modalService.open(RentACarDetailComponent, { size: 'lg' });
        modalRef.componentInstance.car = car;
        modalRef.componentInstance.type = 'edit';
        modalRef.componentInstance.pageTitle = 'Edit vehicle';
        modalRef.result.then((result) => {
            if (result) {
                let answer: number;
                this._rentACarService.editVehicle(result, 2)
                    .takeUntil(this.ngUnsubscribe)
                    .subscribe(
                    result => { answer = result; },
                    error => { this.errorMessage = <any>error; },
                    () => {answer > 0) {
                            this._helperService.showInfo('You have succesfully editet vehicle.', 5);
                            this.ngOnInit();
                        }
                    });
            }
        },
            (reason) => { });
    }

car, type and PageTitle are set as Inputs in modal component