Sunday, June 18, 2017

yet more gunk from a series of Angular 4 training videos

  1. [ngStyle]="{backgroundColor: whatever===13 ? 'red' : 'blue'}" is an example of a condition in an ngStyle.
  2. In making an attribute directive such as myHighlight here you may add something like so at the constructor... private rendery: Renderer2 and then turn around and use it like this:
    ngOnInit() {
       this.rendery.setStyle(this.el.nativeElement, 'width', '50px');
    }

    ...this sort of assumes that private el: ElementRef is also at the constructor.
  3. @HostListener('mouseenter') myMouseEvent(eventData: Event) { is a way to catch a mouseenter event at a tag within your attribute directive. mouseleave and other events are available too.
  4. @HostBinding('style.marginTop') myMargin: string; inside an attribute directive allows for something like this inside a @HostListener method: this.myMargin='10px';
  5. @Input myOffset: string = '10px'; at an attribute directive allows for this.myMargin=this.myOffset; and kinda takes place at the tag itself like so:
    <p myHighlight myOffset="30px;">Highlight me!</p>.
    You may have an alias at the Input to make it whatever you'd like at the tag and you may even make the alias the same name as the selector for the directive! When you do that, you may have something like so:
    <p myHighlight="30px;">Highlight me!</p>
  6. The training kinda touched on making your own structural directive though I don't really see a bunch of reasons to do so myself. If you have something like private foo: TemplateRef<any>, private bar: ViewContainerRef in the constructor then this.bar.EmbeddedView(this.foo); in the getter of a getsetter for an @Input which shares the name with your directive (It has to!) it will allow you to show what is inside of your tag while this.bar.clear(); shows nothing. Based on the value handed in you may write your own thing like *ngIf, but again... why?
  7. The training had an example of doing so some static state stuff in a service and cautioned that if you share a service across two components that, if you want to share state and not have two separate instances, that you need to loop in the provider not at each component but hierarchically above at a component wrapping the components.

Yay! It's fun to build stuff:

No comments:

Post a Comment