My Sticky Helmet Notes

Template = UI HTML    Component = TS Script Access HTML element (DOM object) in typescript (Same component) HTML Element -> Component typescript (One Way) 1. HTML Bind -> Declare variable element using '#' 2. Typescript Bind -> Declare @ViewChild(< Variable in html>) <variable in TS>: ElementRef; ---------------------------------------------------------------------------------------------- Access Typescript variable in HTML (Same component) typescript -> HTML Element (One Way) 1. HTML Bind -> using interpolation {{variable in TS}} (display purpose) Direct use the varible name to get the value 2. Typescript Bind -> Declare variable ---------------------------------------------------------------------------------------------- Access HTML input value in typescript and vice verca (Same Component) Component typescript <-> HTML Input (Two Way) 1. HTML Bind -> Assign [(ngModel)] = variable in TS 2. Typescript Bind -> De

Component and Directive is very important in Angular 2. Today we sharing difference between component and directive in Angular 2. Components Directive For register component we use @Component meta-data annotation. For register directives we use @Directive meta-data annotation. Component is a directive which use  shadow  DOM to create encapsulate visual behavior called components.  Components are typically used to create UI widgets. Directives is used to add behavior to an existing DOM element. Component is used to break up the application into smaller components. Directive is use to design re-usable components. Only one component can be present per DOM element. Many directive can be used in a per DOM element. @View decorator or templateurl template are mandatory in the component. Directive don’t have View. Component is used to define pipes. You can’t define Pipes in directive. viewEncapsulation can be define in components because t

When writing HTML source code, you can define attributes on your HTML elements. Then, once the browser parses your code, a corresponding DOM node will be created. This node is an object, and therefore it has properties. For instance, this HTML element: <input type = "text" value = "Name:" > has 2 attributes. Once the browser parses this code, a HTMLInputElement object will be created, and this object will contain dozens of properties like: accept, accessKey, align, alt, attributes, autofocus, baseURI, checked, childElementCount, childNodes, children, classList, className, clientHeight, etc. For a given DOM node object, properties are the properties of that object, and attributes are the elements of the  attributes  property of that object. When a DOM node is created for a given HTML element, many of its properties relate to attributes with the same or similar names, but it's not a one-to-one relationship. For instance, for this HTML element:

1: Installing Bootsrap Next, we need to install Bootstrap. Change the directory to the project we created ( cd angular-bootstrap-example ) and execute the following command:

From the root of your project, run in your terminal:

How to install ionic using Yarn. Alternative 1: ionic config set -g yarn true https://github.com/ionic-team/ionic/issues/10647

Write a component when you want to create a reusable set of DOM elements of UI with custom behaviour. Write a directive when you want to write reusable behaviour to supplement existing DOM elements https://stackoverflow.com/questions/32680244/directive-v-s-component-in-angular?rq=1