angular2-directives

问题 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

问题 I'm trying to build a simple app with angular2, I have the below component: @Component({ selector: 'map-menu', templateUrl: './angular-app/components/map-menu.html' }) export class MapMenuComponent { @Input() selectedMarkers: Array<google.maps.Marker>; constructor() { // setInterval(() => { // console.log(this); // }, 1000); } } when my map-menu.html is: <ul class="nav nav-sidebar"> <li *ngFor="#marker of selectedMarkers #i = index"><a href="#">{{marker.data.name}}</a></li> </ul> and in my

问题 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 }}

问题 I have having two components in my app. I need to animate the transition between these those pages. I need to flip the page 1 and then page 2 should appear. I there any plugin to do it in ionic 2. Any reference/example will be appreciated. I am using this.navController.setRootPage(Page2) to go from one page to another. 回答1: I don't know the Ionic framework, but here's a demo (plunker) how it works with plain Angular2: http://plnkr.co/edit/yJHjL5ap9l4MwOimCyyY?p=preview Using the animations

问题 I'm building a data table component that is being designed as very generic component. The idea is to define the table as this: <app-datatable [items]="currentPageResult"> <app-datatable-column attribute="id" header="ID"></app-datatable-column> <app-datatable-column attribute="name" header="First Name"></app-datatable-column> <app-datatable-column attribute="last_name" header="Last Name"></app-datatable-column> </app-datatable> In this way, we can specify the array into the datatable component

问题 I upgraded my Angular from 4 to 6, and consequently had a problem with my click-off policy, it stopped working on all components. my directive: import { Directive, Output, EventEmitter, ElementRef, HostListener } from '@angular/core'; @Directive({ selector: '[clickOutside]' }) export class ClickOutsideDirective { constructor(private _elementRef : ElementRef) { } @Output() public clickOutside = new EventEmitter(); @HostListener('document:click', ['$event.target']) public onClick(targetElement)

问题 I'm trying to create my own directive in Angular 4. But, I got this error when bind the property of class into component template. Console error: Unhandled Promise rejection: Template parse errors: Can't bind to 'data' since it isn't a known property of 'tree'. ("<tree [ERROR ->][data]="data"></tree>"): My tree-view-component.ts: @Component({ selector: 'app-tree-view', template: '<tree [data]="data"></tree>' }) export class TreeViewComponent implements OnInit { @Input() data: any[];

问题 Hi all: I have a component. The component view has a table: <div class="container"> <h2>Recipients List</h2> <br> <table class="table table-striped"> <thead> <tr> <th>Id</th> <th>Name</th> <th>Phone</th> <th>Status</th> <th>Select</th> </tr> </thead> <tbody> <tr *ngFor="#rp of arrAll"> <td>{{rp.id}}</td> <td>{{rp.name}}</td> <td>{{rp.phone}}</td> <td>{{rp.isActivated?'Active':'Inactive'}}</td> <td> <input #{{rp.id}} type="checkbox" (change)="checkbox(value)"> </td> </tr> </tbody> </table>

问题 I've created one custom attribute directive that can validate input, It has value or not. Please refer below code. I don't know why if condition is not working, in console.log it is showing 0 only. is there anything wrong in my code? I tried with other angular's app lifecycle event too. Thanks! import { Directive, ElementRef, Input, AfterContentInit ,Renderer } from '@angular/core'; @Directive({ selector: '[inputfocus]' }) export class InputFocusedDirective implements AfterContentInit {

问题 In Angular 1 we could make a directive attribute required. How do we do that in Angular 2 with @Input? The docs don't mention it. Eg. Component({ selector: 'my-dir', template: '<div></div>' }) export class MyComponent { @Input() a:number; // Make this a required attribute. Throw an exception if it doesnt exist @Input() b:number; constructor(){ } } 回答1: Check in ngOnInit() (inputs aren't yet set when the constructor is executed) whether the attribute has a value. Component({ selector: 'my-dir'