angular-components

@Component({ selector: '.donation', template: ` <figure id="donation" move> <img src="image/qrcode.png"/> <figcaption> Buy me a cup of coffee. </figcaption> </figure> ` }) export class DonationComponent{} @Directive({ selector: '[move]' }) export class MoveDirective{} Hey,I want to get element's width/height within MoveDirective and DonationComponent,I read the document several times but still can not find a way to this answer.Do somebody know this please help me,thanks a lot! You can use ElementRef as shown below, DEMO : https://plnkr.co/edit/XZwXEh9PZEEVJpe0BlYq?p=preview check browser's

We are developing a corporate component library which should provide Material Designed Angular Components. So the users of this library are not supposed to use e.g. Angular Material directly but rather include some component like " custom-tabs ". Using the components of MatTabModule directly works like a charm, whereas when using our custom components the projected content does not show up. Usage looks very similar to the Angular Material API: <custom-tabs> <custom-tab [label]="labelA">Content A</custom-tab> <custom-tab [label]="labelB">Content B</custom-tab> <custom-tab [label]="labelC"

I have a parent component which is getting data from a server through a service. I need some of this data to be passed to the Child component. I've been trying to pass this data with the usual @Input() however as I expected the data I'm getting in the Child component is undefined . Example Parent Component @Component({ selector: 'test-parent', template: ` <test-child [childData]="data"></test-child> ` }) export class ParentComponent implements OnInit { data: any; ngOnInit() { this.getData(); } getData() { // calling service and getting data this.testService.getData() .subscribe(res => { this

NOTE: for simplicity consider the component depths as: - Smart (grand)parent level 0 - dumb child level 1 .... - dumb grandchild level 2 ....) There are various options and conditions on how smart/grand/parent/child components communicate and pass data up and down a MULTI-LEVEL (at least 3 levels) chain. We'd like to keep our 'smart' (grand)parent component as the only component that has access to our data service (or atomic/immutable store) and it will drive exchange of information with 'dumb' (grand)children. The options we see are: Anti-pattern(?) : Pass data down and up the component chain

I'm trying to implement a modal dialog with a dynamic component and custom template. I'm able to implement the same however the dialog opens 'n' times. (first call 1 dialog, 2nd call 2 dialog and so on) The modal will be opened any other component with the HelperService injected and by calling the openModal() method with a component as parameter. Sorry for a lengthy post. ./custom-modal.component.ts @Component({ selector: 'custom-modal', templateUrl: './custom-modal.component.html' }) export class CustomModalComponent implements OnInit, AfterViewChecked { @ViewChild('dynamic', {read:

I'm using *ngFor to iterate some data like this: <div *ngFor="let d of [1, 2, 3]"> {{d}} </div> Everything is fine and I got the result as expected: <div> 1 </div> <div> 2 </div> <div> 3 </div> Then, I wondered if I use a function instead of {{d}} , so I wrote a function: protected logAndReturn(item) { console.log(item); return item; } and I used it: <div *ngFor="let d of [1, 2, 3]"> {{logAndReturn(d)}} </div> I got the same rendered HTML result as the first code, but console output wasn't my expected output. Console output: 1 2 3 1 2 3 Angular is running in the development mode. Call

Yes, I see that other people get this error , I just don't quite get how to fix it in my code private _url = 'https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH,LTC,EOS,DASH&tsyms=USD' If I didn't have the return it does not crash with the error , but I do want to return the data. I have a component that calls up this method ( in this service ts file ) Subscriber: getAllCoins() { var blah = []; return this.getCoins().subscribe( data => { blah = data; //console.log('subscriber coins', blah) } ) } Calls this code getCoins() { return this.http.get(this._url) .map((response: Response)

Using the proper Angular Material directive , how do I change the direction to vertical? Starting with vertical tabs: Then want to drop to content below mat-select dropdown: EDIT: Will be working on adapting https://stackoverflow.com/a/43389018 into my answer, if someone doesn't beat me to it :) Wrote angular-vertical-tabs . This simply wraps @angular/material 's mat-selection-list , and uses @angular/flex-layout to reorient for different screens sizes. Usage <vertical-tabs> <vertical-tab tabTitle="Tab 0"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tincidunt mattis neque