CODEWITHSUNDEEP
cssangular
Muirik
Muirik

Reputation: 6289

Placing Link Text Within a Button in Angular App

I have an href link that triggers a download located within a button in my Angular component HTML. I can see both the button and the highlighted text link in my browser. However, when I click the link, nothing happens - in terms of triggering the download. This is what I have:

<button class="email-prompt-button" md-button>
    <a [href]="fileUrl" download="file.txt" class="btn-link">Download File</a>
</button>

Now, if I remove the button, and just have the a tag, it works:

<a [href]="fileUrl" download="file.txt" class="btn-link">Download File</a>

How can I get this to works as link text within a button?

Upvotes: 0

Views: 2134

Answers (1)

Adarsh Sharma
Adarsh Sharma

Reputation: 576

Why don't you shape your anchor tag shapes to look like a button by applying custom css

or

If you're using Bootstrap you can apply below classes:

btn btn-primary

Just like

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<a [href]="fileUrl" download="file.txt" class="btn btn-primary btn-link">Download File</a>

Upvotes: 3

Related Questions