How to insert hyperlinks inside an accordion? - html

Question

I need to insert a bunch of blue hyperlinks inside an accordion. So when we click the title, the expansion area that appears would contain a couple lines that call some function.
I've attempted to follow the example on the Angular Material website:
https://stackblitz.com/angular/ybovddobxlj?file=app%2Fexpansion-overview-example.html
I've modified expansion-overview-example.html to the following:
<mat-accordion>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
ALL FILES
</mat-panel-title>
</mat-expansion-panel-header>
<div> <!-- To put them on separate lines -->
<mat-form-field>
<label title="File 1" onclick="openFile1()"></label> <!-- THIS LINE BREAKS THE PAGE. HELP? -->
</mat-form-field>
</div>
<div> <!-- To put them on separate lines -->
<mat-form-field>
<label title="File 2" onclick="openFile2()"></label> <!-- THIS LINE BREAKS THE PAGE. HELP? -->
</mat-form-field>
</div>
</mat-expansion-panel>
</mat-accordion>

Answer 1

First of all, remove the mat-form-field, it is not required if you just want a simple link in the accordion (this is actually what breaks your code).
Just add a simple p tag with a (click) event handler (it is not onclick in Angular). This should do the trick:
<div>
<p (click)="openFile1()">File 1</p>
</div>
If you want to use label instead, use it like this:
<div>
<label (click)="openFile2()">File 2</label>
</div>
It should have a value, otherwise it is not visible and you can't click it.
Here
is a stackblitz with your sample code edited to make it work.