| import { trigger, state, style, animate, transition, query, group, animateChild } from '@angular/animations'; | |
| export const slideInAnimation = trigger('routeAnimations', [ | |
| transition('* <=> *', [ | |
| style({ position: 'relative' }), | |
| query( | |
| ':enter, :leave', | |
| [ | |
| style({ | |
| position: 'absolute', | |
| top: 0, |
| import { trigger, state, style, animate, transition, query, stagger, group } from '@angular/animations'; | |
| export const listAnimation = trigger('listAnimation', [ | |
| transition('* => *', [ | |
| // each time the binding value changes | |
| query(':enter', [style({ opacity: 0 }), stagger('60ms', animate('600ms ease-out', style({ opacity: 1 })))], { | |
| optional: true | |
| }), | |
| query(':leave', animate('200ms', style({ opacity: 0 })), { optional: true }) | |
| // query(':leave', [ | |
| // stagger(100, [ |
The :host selector is the only way to target the host element. You can't reach the host element from inside the component with other selectors because it's not part of the component's own template.
:host(.active) {
border-width: 3px;
}
The :host-context() selector looks for a CSS class in any ancestor of the component host element, up to the document root.
| Notes :- | |
| 1. Split Presentation and Rendering Logic. | |
| 2. ViewChild is evaluated in the ngAfterViewInit hook where as for a directive INput params are | |
| evaluated in OnInit lifecycle hoook. | |
| 3. Using renderer so its platform specific and rendered evaluates working inside platform for web, web worker, mobile. | |
| 4. ViewContainers = Structural Directives are based on view containers. ngIf, ngSwitch. | |
| 5. ng container and view container is different. ng contianer acts as a view container. | |
| 6. Embedded view and host view. Host view are attached to DOM and embedded views are always part of view container. |
* Titles subject to change
| React | Angular |
|---|---|
| 00 Introducing Advanced React Component Patterns | 00 Introducing Advanced Angular Component Patterns |
| 01 Build a Toggle Component (source) | 01 Build a Toggle Component (stackblitz) |
| 02 Write Compound Components (source) | [02 Write Compound Components](ht |
| function getFinalOpenedDoors (numDoors) { | |
| // Good luck! | |
| var door = { | |
| state: false | |
| }; | |
| var doors = []; | |
| var counter = 1; | |
| for(var i=0;i<numDoors;i++) { | |
| } |
| function validateBrackets(inputStr) { | |
| var inputArr = inputStr.split(""); | |
| var openBrackets = ['(', '{', '[']; | |
| var closedBrackets = [')', '}', ']']; | |
| var circlePairs = { ')' : '('}; | |
| var sqPairs = {']' : '['}; | |
| var curlyPairs = {'}' : '{'}; | |
| <style id="jsbin-css"> | |
| .masonry-layout { | |
| column-count: 4; | |
| -webkit-column-count: 4; | |
| column-gap: 1 ; | |
| -webkit-column-gap: 1; | |
| } | |
| .masonry-layout__panel { | |
| break-inside: avoid; | |
| -webkit-column-break-inside: avoid; |
| <!DOCTYPE html> | |
| <html ng-app="app"> | |
| <head> | |
| <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>JS Bin</title> | |
| </head> | |
| <body ng-controller="MyAppController"> | |
| <outer twowayvar="twoWayBindingVar" demo-function="demoFunction()" inner-demo-function='innerDemoFunction()'> |