angular2-directives | 易学教程

How to use flex layout along with md-card in the grid in angular 2?

阅读更多关于 How to use flex layout along with md-card in the grid in angular 2?

I am using "@angular/core": "2.4.10" and "@angular/material": "2.0.0-beta.2". I have installed flex-layout using npm. I want to design responsive grid with cards. I am using md-grid-list and md-card. How do I use flex layout with md-card or md-grid-list. The grid and the card should be responsive according to the window/screen size. Expected result: As soon as I decrease the screen size, the number of columns should be reduced and when the screen size is big the number of columns should increase without overlapping the contents in the card. user2301 Here is the sample code which might be

Format input value after Angular2 ngModel is applied

阅读更多关于 Format input value after Angular2 ngModel is applied

I am trying to create a directive that will format the input value to a currency format. I am able to do what I have to do on focus and on blur, and in the ngOnInit hook (and any other hook), the input element does not yet have any values applied to it. How do I "watch" for the input's value, and format it when it's initial value is applied? Here is my directive: import { Input, Directive, HostListener, ElementRef, Renderer, OnInit } from '@angular/core'; import { NgModel } from '@angular/forms'; import { CurrencyPipe } from '@angular/common'; @Directive({ selector: '[currencyInput]',

Angular 2 : HTML property binding

阅读更多关于 Angular 2 : HTML property binding

问题 I'm trying to understand the HTML bindings as I'm new to angular. Can someone please explain the difference between the following syntax:  <button name1 = "name2" >test</button>  <button (name1) = "name2" >test</button>  <button [name1] = "name2" >test</button>  <button ([name1]) = "name2" >test</button> I have seen above in multiple places but could not understand the purpose of each case. Thank you for the help! 回答1: There are two different thinks..

Compile Angular 2 node_modules files into one file

阅读更多关于 Compile Angular 2 node_modules files into one file

问题 I am trying to figure out a way to compile everything I need from the angular 2 node_modules folder into one file.. It seems that there is a crazy amount of http calls when my site is loading and surely thats not optimal or the recommended process of the new and improved angular.. Im not concerned with my own typescript files as i know how to handle them but what are your approaches to concatenating the node_modules files etc ? 回答1: If you're using SystemJS 1. package.json : add these to

Angular - Google places directive isn't being triggered when the input value changes

阅读更多关于 Angular - Google places directive isn't being triggered when the input value changes

I'm trying to write a google place directive since all the finished ones doesn't seem to work very well or have a code base that is just horrendous. So here is my attempt which is clean but it isn't activating when the user types something: @Directive({ selector: '[googlePlace]' }) export class GoogleplaceDirective implements OnInit { @Output() placeChange: EventEmitter<any> = new EventEmitter<any>(); public autocomplete: any; constructor(private elementRef: ElementRef) {} ngOnInit() { this.autocomplete = new google.maps.places.Autocomplete(this.elementRef.nativeElement, {}); google.maps.event

Using cellRendererFramework in Angular 5 ag-grid data table

阅读更多关于 Using cellRendererFramework in Angular 5 ag-grid data table

问题 I am building a app in angular 5. In my HTML page, I have a table which shows the data on being queried. This data is being displayed in ag-grid using directive. One of the column in grid is displayed as HTML link. I am using cellRendererFramework feature to show the values in column as link. It is working fine and displays the link on the value for that column in table for each row. My requirement is that I want to pass additional parameter to cellRendererFramework component from the main

Angular2 - Pass values to a dynamic component created with ComponentFactory

阅读更多关于 Angular2 - Pass values to a dynamic component created with ComponentFactory

问题 I was following Günter Zöchbauer's advice on how to create dynamic components and I was wondering how I could pass values to it - as in, the child component has an @input. Using the plunker example given in the above question - plunker - how could I pass the child component a string, lets call it message, that would then display when clicking the 'add' button. Here's an example of how the child component might look: import {Component OnChanges, Input} from '@angular/core' @Component({

Angular 2 - background image into a html file using ngStyle

阅读更多关于 Angular 2 - background image into a html file using ngStyle

I am pulling data from an API using an Angular 2 service.. I can output everything from the json api onto the page using something similar to this {{ project.title }} however i wish to output the url to a background image and I cant seem to get it working.. has anyone got any ideas or advice ? Currently this is what I have. I've tried it without the curly braces also but nothing is working. <div class="table-wrap featuredimg" [ngStyle]="{'background-image': 'url(' + {{ project.projectimage }} + ')'}"> You don't need use {{}} for call some propiety than you put in a directive, like this: import

How [class] [attr] [style] directives work

阅读更多关于 How [class] [attr] [style] directives work

问题 I examined ngStyle, ngClass directives here but I still couldn't understand how these work: <div [attr.role]="myAriaRole"> <div [class.extra-sparkle]="isDelightful"> <div [style.width.px]="mySize"> Built-in directives don't select such an attribute: class.extra-sparkle . What kind of selector can select such html attribute? Which built-in directive handles this? As far as I know html attributes with dot ( style.width.px ) are not legal already. Apparently the string withing square brackets

Google autocompleter place doesn't work in the Child Component in Angular 2

阅读更多关于 Google autocompleter place doesn't work in the Child Component in Angular 2

问题 I was using the googleplace directive for the Google places autocompletor. It works when I use this directive in AppComponent as shown in the link but doesn't work when I used it in the child Components. app.routes.ts import { provideRouter, RouterConfig } from '@angular/router'; import { BaseComponent } from './components/base/base.component'; import { DashboardComponent } from './components/dashboard/dashboard.component'; const routes: RouterConfig= [ {path:"",redirectTo:"/admin",pathMatch: