angular2-directives

I would like to display different template in my component. Only one will show. If hasURL is true , I want to show the <a></a> . If hasURL is false , I want to show the <button></button> . The problem if hasURL is false, the component show button, but the ng-content is empty. Because it's already read in the first " a></a> Is there a way to solve that please? <a class="bouton" href="{{ href }}" *ngIf="hasURL"> <ng-content> </ng-content> </a> <button class="bouton" *ngIf="!hasURL"> <ng-content> </ng-content> </button> Thanks! You can wrap ng-content in ng-template and use ngTemplateOutlet <a

I've been trying to get a draggable div working using Angular 2. I'm using this example from the angular2-examples repo as a starting point, only really adjusting the code to account for the removal of the toRx() method. The code works, but it does not account for mouseout events. This means that if I click on a Draggable div, and move the mouse slowly , the div will move with the mouse. But if I move the mouse too fast, a mouseout event is sent instead of a mousemove event, and the dragging stops. How can I keep the drag going after the mouse is moved so far that a mouseout event is fired? I

I am facing an issue with the Angular2 router and an async pipe. I am trying to render an RxJs Observable and the data does not render automatically. One has to click on the link for the route for the data to render. Here is the root app: import {bootstrap} from 'angular2/platform/browser'; import {HTTP_PROVIDERS} from 'angular2/http'; import {ROUTER_PROVIDERS} from 'angular2/router'; import {AppComponent} from './app.component.ts'; bootstrap(AppComponent, [HTTP_PROVIDERS, ROUTER_PROVIDERS]); Here is the root component: import {Component} from 'angular2/core'; import {RouteConfig, ROUTER

I have a template that creates a list of links using *ngFor and a separate div element that I want to change its location based on the currently active link. Template: <div #divHandle *ngFor="let link of links; let i = index" class="div-link" (click)="changeActiveLink(i)"> <h2>{{link}}</h2> </div> <div [@indexState]="activeLink" id="highlighter"></div> This results in a structure like so: <div class="div-link"> <div (click)="changeActiveLink(0)"><h2>Link 1</h2></div> <div (click)="changeActiveLink(1)"><h2>Link 2</h2></div> <div (click)="changeActiveLink(2)"><h2>Longer link 1</h2></div> <div

Trying to place a component dynamically to a child element, using a directive. The component (as template): @Component({ selector: 'ps-tooltip', template: ` <div class="ps-tooltip"> <div class="ps-tooltip-content"> <span>{{content}}</span> </div> </div> ` }) export class TooltipComponent { @Input() content: string; } the directive: import { TooltipComponent } from './tooltip.component'; @Directive({ selector: '[ps-tooltip]', }) export class TooltipDirective implements AfterViewInit { @Input('ps-tooltip') content: string; private tooltip: ComponentRef<TooltipComponent>; constructor( private

I'm trying to create a parent and child component where the child component is going to have a states drop down. Can someone help me understand how I can access the states drop down value in Parent Component? Here is my sample code. /app/app.ts import {Component} from 'angular2/core' import {FORM_DIRECTIVES, FormBuilder, ControlGroup, Validators} from 'angular2/common' import {State} from './state' @Component({ selector: 'my-app', providers: [FormBuilder], templateUrl: 'app/app.html', directives: [State] }) export class App { registrationForm: ControlGroup; state: State; constructor(fb: