How do I reference an Html Id in an angular component

Question

I'm using Angular 9.

In an html component I have:

<ng-template #modalTemplate>.......

then in my corresponding ts file I have:

@Component({
   templateUrl: './myModal.component.html'....
)}

how do I make reference to #modalTemplate in my ts file?

score 1 · Answer 1 · answered Apr 01 '20 at 10:10

1

Good day!

You should do smth like this:

@ViewChild('modalTemplate', { static: false }) modalTemplate: TemplateRef<any>;

answered Apr 01 '20 at 10:10

AlexanderFSP

652
4
10

thanks for your help. However, I still have an issue because further down in my ts file I have a "show" method and in there it was calling the show method, but now show expects a template to be passed. Hence my original question. The Modal template get's called from a number of pages, hence trying to keep it self contained. (this is an upgrade of an existing project). So in my method I might have `modalTemplate.show(xxxxxx)` what do I place in xxxxxx – bilpor Apr 01 '20 at 10:17
Using a templateref for a reusable modal is probably not ideal. If your modal supports components as well as templaterefs, it’s much easier to make a component out of your model content and simply import that component whereever you need that modal. The ngx-bootstrap modal supports that for example. – MikeOne Apr 01 '20 at 11:14

score 0 · Answer 2 · answered Apr 01 '20 at 10:12

You have to use ViewChild for this.
For example:

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})

export class AppComponent {
    @ViewChild('spinnerElement', { static: true }) spinnerElement: ElementRef;;
}

Then you can access it in your component's method like so:
this.spinnerElement.doSomething()

How do I reference an Html Id in an angular component

2 Answers2