Let's try another example, but this time we will bind to events as well. For this example we will use another widget from the bootstrap library called collapse
. In the components
folder, create a new folder named collapse
. Inside it, create a file named collapse.ts
for our component and a file named collapse.html
for the component
template.
Open collapse.ts
and paste the following code. This is an example collapse widget that was taken as-is from the bootstrap website (http://getbootstrap.com/javascript/#collapse):
[collapse.ts] import { Component, AfterViewInit } from '@angular/core'; import * as $ from 'jquery'; @Component({ selector: 'collapse', templateUrl: './collapse.html' }) export class Collapse implements AfterViewInit { ngAfterViewInit() { $('.collapse').collapse(); } }
Open collapse.html
and paste in the following:
[collapse.html] <button class="btn btn-primary" data-toggle="collapse" data-target="#collapseExample" ...