Template Additional Attributes on a Link

You can add the additional attributes on a link with the help of link-to helper.

Syntax

{{link-to 'link-text' 'route-name' class = "btn-primary"}}

Example

The example shows how to add additional attributes on a link. Create a route with the name as info and open the router.js file to define the URL mappings −

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend ({
   location: config.locationType,
   rootURL: config.rootURL
});

Router.map(function() {
   this.route('info');
});

export default Router;

Open the file application.hbs file created under app/templates/ with the following code −

//Adding the additional attributes on a link as class = "btn btn-primary" 
{{link-to 'Click For Fruits List' 'info' class = "btn btn-primary"}}
{{outlet}}

When you click the "Click For Fruits List" link, page should open the info.hbs file which contains the following code −

<p>Some Fruits</p>
<ul>
   <li>Orange</li>
   <li>Banana</li>
</ul>
{{outlet}}

Output

Run the ember server; you will receive the following output −

Next, click on the Click For Fruits List, it will display the following text from the template file −