Selects' events in Angular2

Please, can you help me? It is supposed to be easy, but I can’t find the solution. There is a form with two selects. When #select1 changes, #select2 needs to show data according to the value of #select1. For example, get cities of each state. Kind of :

//html

<select (change)="select2.getCities($event)" ng-control="userState">
    <option *ng-for="#state of states" [value]="state">{{state}}</option>
</select>

<select #select2 ng-control="userCity">
    <option *ng-for="#city of cities" [value]="city">{{city}}</option>
</select>

//the Component
@Component({ selector: 'user-management', appInjector: [FormBuilder] });
@View({ templateUrl: 'user-management.html', directives: [NgFor] });
export class userManagement {
    constructor(fb: FormBuilder){
        this.userForm = fb.group({
            userState: [],
            userCity: []
        });
        this.states = ['New York', 'Pennsylvania'];
        this.cities = {'New York': ['Albany', 'Buffalo'], 'Pennsylvania':['Pittsburgh', 'Philadelphia']};
    }
    getCities($event){
        return this.cities[$event.target.value];
    }
}

This, of course, doesn’t work. PLEASE, do you know how it should be done? It’s in alpha28.

How to get access to an HTML video element in Angular2

I have an HTML5 <video> element in an Angular2 component. I need access to it in order to check the duration before allowing the user to share it to Twitter.

Is there any way through model binding, or direct access to the DOM, that I can get this information in the component’s backing class?

I’ve tried binding it using ng-model, like this in the component’s template:

<video controls width="250" [(ng-model)]="videoElement">
    <source [src]="video" type="video/mp4" />
</video>

and in the component’s class (TypeScript):

videoElement: HTMLVideoElement;

That gives me this error: EXCEPTION: No value accessor for '' in [null]

I was able to access it by just giving the video element an id and using document.getElementById("videoElementId") but it seems like there must be a better way.

Polymer elements within angular 2 component

I have a set of custom polymer elements, that I would like to use within an angular 2 application.

It seems like there’s a problem concerning the content tag of the polymer element. The content of the element gets rendered at the wrong place within the polymer element, if the element is located within an angular 2 component.

Example:

The template of my polymer element “my-button” looks like this:

<template>

  <button>
    <content></content>
  </button>

</template>

Use outside angular

When I use this element outside of my angular 2 component, I get the result that I expected:

Use:

<my-button>Foo</my-button>

Result:

<my-button>
  <button>
    Foo
  </button>
<my-button>

Use within angular 2 component

When used within an angular 2 component, the content always gets rendered at the end of the elements template. Just like the content tag didn’t exist.

Use:

<my-button>Foo</my-button>

Result:

<my-button>
  <button>

  </button>
  "Foo"
<my-button>

Question

The problem might be, that polymer and angular 2 both use the content tag for transclution. So maybe things get a little messy when using both together.

I would love to use all of my polymer elements inside angular 2. So any ideas on how to fix this would be very much appreciated.

Create Html local variable programmatically with Angular2

I need to know if there is a way to create HTML local variables programmatically.

I am developing a web app where I have an NgFor loop and I want to be able to assign a local variable to each sub element created by the NgFor.

ie :

<div *ngFor="#elt of eltList" >
    <span #setLocalVariable(elt.title)></span>
</div>

setLocalVariable(_title : string){
    let var = do some stuff to _title;
    return var;
}

The exemple above shows you what I am trying to accomplish and obviously does not work.
Is there a way to achieve this ?

Thank you in advance.

Edit:

After seeing the answers I got (and i thank everyone who took the time to read my question and tried to answer it) i’ll explain a bit more why i want it that way.

I will be using : loadIntoLocation() from the DynamicComponentLoader.
That function got as a 3rd parameter a string that refers to an anchors (ie : #test in an html element). Thats why i need to create those local variables with a name equal to the one of my elt.title.

What's correct file path in Angular2?

I have a file structure like this :

/root
--/app
----app.ts
--/components
----/banner
------banner.ts
------banner.css
--index.html 

I have import banner.ts inside app.ts like this
import {Banner} from '../components/banner/banner';

In banner.ts, I want to get the banner.css file so I write this:

import {Component} from 'angular2/core';

@Component({
  selector: 'banner',
  templateUrl: '../components/banner/banner.html',
  styleUrls: ['../components/banner/banner.css']
})

This works, but when I change to this, it failed:

 styleUrls: ['./banner.css']

I also try styleUrls: ['banner.css'], failed

Based on my understanding, the ‘./’ means in the same directory, but why I get an 404 error?

I am using the most updated Angular2

SystemJS, Browser Sync Setup

I am trying to follow the angular 2 setup guide and am having issues. I am using browsersync and I cannot seem to figure out how to get this code to work.

 <script>
   .......
  System.import('./app/boot')
        .then(null, console.error.bind(console));
  </script>

The application cannot find /app/boot.js because I am serving up the application using a gulp build process. I cannot access any directories with my “gulp serve” build process, and browser sync is being used. How can I go about using SystemJS in combination with browser sync so that it can find my boot.js file?

Sorry if this is a easy question. I am new to this kind of build process and normally it would be straightforward to just include the file. Thanks.