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
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 .
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.
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.
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.
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);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With