Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Get ng-template from component angular 2

how can i get the element in angular 2? in case i have this in html

<ng-template #content let-c="close" let-d="dismiss">
  <div class="modal-header">Header</div>
   <div class="modal-body">Body</div>
  <div class="modal-footer">footer</div>
</ng-template>

i use that for ngBmodal ng-bootstrap if i use button for open content its work = button

(click)="open(content,data.id)"

then i would like open content from component in this case, im redirect from other page and open content

ngOnInit() {
    this.activatedRoute.queryParams.subscribe((params: Params) => {
        let id = params['id'];
        if(id != undefined){
          this.open('content',id);         
        }
      });
  }
open(content, id) {
    this.dataModal = {};
    this.getDataModal(id);

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

modal open but not with the html, i try afterviewinit to get #content it doesnt work thanks,sorry for my english :v

like image 748
Rifal Avatar asked May 16 '17 07:05

Rifal


People also ask

How do I get ng-template reference in component?

To get started using template reference variables, simply create a new Angular component or visit an existing one. To create a template reference variable, locate the HTML element that you want to reference and then tag it like so: #myVarName .

How do you access the template reference variable in another component?

Usually, the reference variable can only be accessed inside the template. However, you can use ViewChild decorator to reference it inside your component. @ViewChild('firstNameInput') nameInputRef: ElementRef; After that, you can use this.

Can I use ng-template without ngIf?

ng-template should be used along with structural directives like [ngIf],[ngFor],[NgSwitch] or custom structural directives. That is why in the above example the contents of ng-template are not displayed. ng-template never meant to be used like other HTML elements.

Is ng-template a div?

To sum up, ng-content is used to display children in a template, ng-container is used as a non-rendered container to avoid having to add a span or a div, and ng-template allows you to group some content that is not rendered directly but can be used in other places of your template or you code.


1 Answers

First import NgbModal and ModalDismissReasons

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

and add modalservice to constructor

private modalService: NgbModal

See:

https://ng-bootstrap.github.io/#/components/modal/examples#options

Then in your typescript file:

1 - Import TemplateRef and ViewChild, example:

import { TemplateRef, ViewChild } from '@angular/core';

2 - Create the variable that binds the ngtemplate (add before constructor):

@ViewChild('content')
private content: TemplateRef<any>;

3 - Open modal from typescript:

this.modalService.open(this.content);
like image 89
alansastre Avatar answered Nov 13 '22 18:11

alansastre