Redirecting to Url with additional custom data in AngularDart

Question

A list of name is populated and while click on that name it redirects to google search. I need help in adding a custom populated data name to the url through html which will redirect the visitor with an auto searched result of Google search.

app_component.html

     <h1>{{title}}</h1>

    <h2>My favorite hero is: {{myHero.name}}</h2>

    <p>Heroes:</p>

    <ul>

       <li *ngFor="let hero of heroes">

             <a href="https://www.google.co.in/search?q=">{{ hero.name }}</a>

       </li>

    </ul>

app_component.dart

     import 'package:angular2/angular2.dart';
     import 'src/hero.dart';


   @Component(
      selector: 'my-app', 
      template: '''app_component.html''', 

      directives: const [CORE_DIRECTIVES], )

      class AppComponent {
            String title = 'Tour of Heroes';
            List<Hero> heroes = [
              new Hero(1, 'Windstorm'),
              new Hero(13, 'Bombasto'),
              new Hero(15, 'Magneta'),
              new Hero(20, 'Tornado')
      ];
      Hero get myHero => heroes.first;
     }

Answer 1

Same way as you bind your data to HTML, you can bind it do HTML attribute, eg. this should work.

<a href="https://www.google.co.in/search?q={{ hero.name }}">{{ hero.name }}</a>

By the way, you should consider to add the target="_blank" attribute to the link as well, so the user will open the search in a new tab and your app will still be going on.