Angular
Version 7
What all you will Learn
• Angular Framework
• Essentials of Angular
• Templates
• Styles
• Directives
• Services
• Dependency injections
• Forms- Template/Reactive
• Routing
• Http
• Observables /Promises
• Testing
Angular introduction
• All told, Angular is an open-source front-end web application framework, primarily sustained by Google as well as an extended community of people and companies.
• It is fully extensible and also functions well with other libraries.
• Companies that used Angular to build their websites include Google, PayPal, Nike, HBO, General Motors, Sony, The Guardian, and Upwork.
Benefits of Angular
• Angular supports Model View Controlling architecture (MVC).
• Ease of Integration
• Support for Single Page Applications
• Single Page Applications, or SPAs for short, can communicate with the back-end servers without having to refresh the full webpage for the purposes of loading data in the application
• Angular Uses a Declarative User Interface
• Angular Gives You Modularity
• Cross-Platform Versatility – Works on Desktop,webApps and native mobile apps
Angular components
• Components are the main building block for Angular applications. Each component consists of:
• An HTML template that declares what renders on the page
• A Typescript class that defines behavior
• A CSS selector that defines how the component is used in a template
• Optionally, CSS styles applied to the template
System requirements
• Download node.js
• Download visual studio code for Ide
• Download Angular CLI ->npm install -g @angular/cli
• Creating your first component
• ng n component component name
Folder structure of angular app
• A folder named after the component
• A component file, <component-name>.component.ts
• A template file, <component-name>.component.html
• A CSS file, <component-name>.component.css
• A testing specification file, <component-name>.component.spec.ts
Understanding the template
• A template is a block of HTML that tells Angular how to render the component in your application. Define a template for your component in one of two ways: by referencing an external file, or directly within the component.
• Template representing external file
• @Component({
• selector: 'app-root',
• templateUrl: './app.component.html',
• styleUrls: ['./app.component.css'],
• })
• Typically this kind html addition is used most of the time in major applications rather than inline html
•
Template representing inline html
• @Component({
• selector: 'app-component-overview',
• template: '<h1>Hello World!</h1>',
• })
• Multiple lines html requires backtick
• @Component({
• selector: 'app-component-overview',
• template: `
• <h1>Hello World!</h1>
• <p>This template definition spans multiple lines.</p>
• `
• })
Adding Style CSS to component
• Your component will use the styleurl property to add css
• @Component({ selector: 'app-component-overview', templateUrl: './component-overview.component.html', styleUrls: ['./component-overview.component.css'] })
• You can also add inline css using styles property
• styles: ['h1 { font-weight: normal; }'
Creating your first angular component
• Create new api with cli
• Open localhost and check app
• Go through folders
• Check out template property
• Change html to inline html
Property Binding
• Properties are variables of the component class.There can be one way binding or two way binding of properties.i.
• Property binding in Angular helps you set values for properties of HTML elements or directives. Setting an element property to a component property value.
• Example <img [src]="itemImageUrl">
• itemImageUrl = '../assets/phone.png';
• The brackets, [], cause Angular to evaluate the right-hand side of the assignment as a dynamic expression. Without the brackets, Angular treats the right-hand side as a string literal and sets the property to that static value.
Property Binding
• Toggling button functionality
• To disable a button's functionality depending on a Boolean value, bind the DOM disabled property to a property in the class that is true or false.
• Component template
• src/app/app.component.html
• content_copy
• <!-- Bind button disabled state to `isUnchanged` property -->
• <button [disabled]="isUnchanged">Disabled Button</button>
• Because the value of the property isUnchanged is true in the AppComponent, Angular disables the button.
• Component code
• src/app/app.component.ts
• content_copy
• isUnchanged = true;
Attribute, class, and style bindings
•
Attribute binding in Angular helps you set values for template attributes directly.
• Attribute binding syntax resembles property binding, but instead of an element property between brackets, you precede the name of the attribute with the prefix attr, followed by a dot. Then, you set the attribute value with an expression that resolves to a string.
• <p [attr.attribute-you-are-targeting]="expression"></p>
• <button [attr.aria-label]="actionName">{{actionName}} with Aria</button>
• <tr><td [attr.colspan]="1 + 1">One-Two</td></tr>
• <nav [style.background-color]="expression"></nav>
• Multiple styles
• [style]="styleExpression“ , "width: 100px; height: 100px"
Event Binding in Angular
• Event binding lets you listen for and respond to user actions such as keystrokes, mouse movements, clicks, and touches.
• <button (click)="onSave()">Save</button>
• onSave method
Standard events 1
• // Full list of Angular Events
• (click)="myFunction()"
• (dblclick)="myFunction()"
• (submit)="myFunction()"
• (blur)="myFunction()"
• (focus)="myFunction()"
• (scroll)="myFunction()"
• (cut)="myFunction()"
• (dragover)="myFunction()"
Standard events2
• (copy)="myFunction()"
• (paste)="myFunction()"
• (keyup)="myFunction()"
• (keypress)="myFunction()"
• (keydown)="myFunction()"
• (mouseup)="myFunction()"
• (mousedown)="myFunction()"
• (mouseenter)="myFunction()"
• (drag)="myFunction()"
• (drop)="myFunction()"
Two way Binding
• Two-way binding gives components in your application a way to share data. Use two-way binding to listen for events and update values simultaneously between parent and child components.
• Angular's two-way binding syntax is a combination of square brackets and parentheses, [()]. The [()] syntax combines the brackets of property binding, [], with the parentheses of event binding, (), as follows.
• The following sizerComponent has a size value property and a sizeChange event. The size property is an @Input(), so data can flow into the sizerComponent. The sizeChange event is an @Output(), which lets data flow out of the sizerComponent to the parent component.
@Input
• • Allows data to flow from a parent component to a child
• Component,also from UI to class.
• • Defined inside a component via the @Input decorator:
• @Input() someValue: string;
• • Bind in parent template: <component
• [someValue]="value"></component>
• •We can alias inputs: @Input('alias') someValue: string;
@Output
• Exposes an EventEmitter property that emits events to
• the parent component
• • Defined inside a component via the @Output decorator:
• @Output() showValue: new EventEmitter<boolean>;
• • Bind in parent template: <cmp
• (someValue)="handleValue()"></cmp>
@input and @output Decorators
• @Input allows data to be accepted by the property
• @Output ,data flows out from that property,here we are using it to create a custom event using Eventemitter class,earlier we had seen
standard events as click,blur etc.
• <label [style.font-size.px]="size">FontSize: {{size}}px</label>
• Code in next page
.Component.ts two way binding
• export class SubAppComponent implements OnInit {
•
constructor() { }
• @Input() size: number =9; // This @Input makes this size property accept values dec() { this.resize(-1); }
• inc() { this.resize(+1); }
resize(delta: number) {
• this.size = Math.min(40, Math.max(8, +this.size + delta));
• this.sizeChange.emit(this.size);
• }
• ngOnInit() {
• }
• So now when we increment or decrement the method,the size value is changed in both the UI and in the class
Summary of event and property bindings
Template variables -refs
• Template variables help you use data from one part of a template in another part of the template.
• It also allows you to access input tags values using refs
• In the template, you use the hash symbol, #, to declare a template variable
• Use template variables to perform tasks such as respond to user input or finely tune your applicat
• A template variable can refer to the following:
• a DOM element within a template
• a directive
• an element
• TemplateRef
Refs – Tempate variables
• <input #phone placeholder="phone number" />
<button (click)="callPhone(phone.value)">Call</button>
• Conceptually similary to divid and document.getelementbyid.value
• In the above ,the phone # tag can be used to refer the template
values
We will revisit refs frequently in the topics of NG forms or directives
Template statements
• Template statements are methods or properties that you can use in your HTML to respond to user events.
• With template statements, your application can engage users through actions such as displaying dynamic content or submitting forms.
• Example
• <button (click)="deleteHero()">Delete hero</button>
• The button is calling a method deleteHero
Template expression - Pipes
• Angular provides built-in pipes for typical data transformations
• DatePipe: Formats a date value according to locale rules.
• UpperCasePipe: Transforms text to all upper case.
• LowerCasePipe: Transforms text to all lower case.
• CurrencyPipe: Transforms a number to a currency string, formatted according to locale rules.
• DecimalPipe: Transforms a number into a string with a decimal point, formatted according to locale rules.
• PercentPipe: Transforms a number to a percentage string, formatted according to locale rules.
Pipes formatting
• <p>The hero's birthday is {{ birthday | date }}</p>
• <p>The hero's birthday is {{ birthday | date:"MM/dd/yy" }} </p>
• Example demo
• Two pipes
• The chained hero's birthday is {{ birthday | date | uppercase}}
• Lab demo of all concepts covered ->
<a href="https://www.tutorialspoint.com/learn-angular-and-react-in-one-place/index.asp">Learn Angular And React In One Place
</a>
No comments:
Post a Comment