Skip to content

Instantly share code, notes, and snippets.

View CharlieGreenman's full-sized avatar
🔎
To push or pull that’s the question, but never the answer.

Charlie Greenman CharlieGreenman

🔎
To push or pull that’s the question, but never the answer.
1.7k followers · 4k following
View GitHub Profile
@CharlieGreenman
CharlieGreenman / code-box.component.ts
Created September 15, 2019 16:09
Include Injectable Service in Component
import { Component } from '@angular/core';
import { CodeBox } from './code-box.interfaces';
import { PxCodeFacade } from './px-code.facade';
@Component({
selector: 'px-code-box',
template: './code-box.component.html',
styles: ['./code-box.component.scss'],
})
export class HeroListComponent {
@CharlieGreenman
CharlieGreenman / blog.component.ts
Created September 15, 2019 16:03
passing in with dependency injection
import { PostsFacade } from '@razroo/razroo/data-access/posts';
@Component({
selector: 'razroo-blog',
templateUrl: './blog.component.html',
styleUrls: ['./blog.component.scss']
})
export class BlogComponent implements OnInit {
posts: any[];
allPosts$: Observable<Post[]> = this.postFacade.allPosts$;
@CharlieGreenman
CharlieGreenman / blog.component.ts
Created September 15, 2019 16:01
passing in without dependency injection
import { PostsFacade } from '@razroo/razroo/data-access/posts';
@Component({
selector: 'razroo-blog',
templateUrl: './blog.component.html',
styleUrls: ['./blog.component.scss']
})
export class BlogComponent implements OnInit {
posts: any[];
allPosts$: Observable<Post[]> = new PostsFacade().allPosts$;
@CharlieGreenman
CharlieGreenman / blog.component.ts
Created September 15, 2019 16:01
passing in without dependency injection
import { PostsFacade } from '@razroo/razroo/data-access/posts';
@Component({
selector: 'razroo-blog',
templateUrl: './blog.component.html',
styleUrls: ['./blog.component.scss']
})
export class BlogComponent implements OnInit {
posts: any[];
allPosts$: Observable<Post[]> = new PostsFacade().allPosts$;
@CharlieGreenman
CharlieGreenman / blog.component.ts
Created September 15, 2019 16:01
passing in without dependency injection
import { PostsFacade } from '@razroo/razroo/data-access/posts';
@Component({
selector: 'razroo-blog',
templateUrl: './blog.component.html',
styleUrls: ['./blog.component.scss']
})
export class BlogComponent implements OnInit {
posts: any[];
allPosts$: Observable<Post[]> = new PostsFacade().allPosts$;
@CharlieGreenman
CharlieGreenman / blog.component.ts
Created September 15, 2019 16:01
passing in without dependency injection
import { PostsFacade } from '@razroo/razroo/data-access/posts';
@Component({
selector: 'razroo-blog',
templateUrl: './blog.component.html',
styleUrls: ['./blog.component.scss']
})
export class BlogComponent implements OnInit {
posts: any[];
allPosts$: Observable<Post[]> = new PostsFacade().allPosts$;
@CharlieGreenman
CharlieGreenman / Example2.component.html
Created September 6, 2019 12:59
Solution to Quirk #2 - Inability to apply more than two structural directives on the same element
<ul>
<ng-container *ngFor="let box of boxes">
<ng-container *ngIf="box.item === 'food'">
<li>{{ box.name }}</li>
</ng-container>
</ng-container>
</ul>
@CharlieGreenman
CharlieGreenman / example1.component.html
Created September 6, 2019 12:57
Solution to Quirk #1 - Requiring Extra Element to Implement Structural Directive
<ng-container *ngIf="showText">
<p>This is text.</p>
<p>This is more text.</p>
</ng-container>
@CharlieGreenman
CharlieGreenman / example2.component.html
Created September 6, 2019 12:53
Quirk #2 - Inability to apply more than two structural directives on the same element
<ul>
<li *ngFor="let box of boxes" *ngIf="box.item === 'food'">{{ box.name
}}</li>
</ul>
@CharlieGreenman
CharlieGreenman / example.component.html
Last active September 6, 2019 12:57
Quirk #1 - Requiring Extra Element to Implement Structural Directive
<div *ngIf="showText">
<p>This is text.</p>
<p>This is more text.</p>
</div>