i. From the Component to the DOM: Interpolation: {{ value }}: Adds the value of a property from the component
Property binding: [property]=”value”: The value is passed from the component to the specified property or simple HTML attribute
ii. From the DOM to the Component: Event binding: (event)=” function”: When a specific DOM event happens (eg.: click, change, keyup), call the specified method in the component
iii. Two-way binding: Two-way data binding: [(ngModel)]=” value”: Two-way data binding allows to have the data flow both ways. For example, in the below code snippet, both the email DOM input and component email property are in sync
It doesn't support strongly typed or static typing.
Netscape developed it in 1995.
JavaScript source file is in ".js" extension.
It is directly run on the browser.
It is just a scripting language.
It doesn't support optional parameters.
It is interpreted language that's why it highlighted the errors at runtime.
JavaScript doesn't support modules.
In this, number, string are the objects.
JavaScript doesn't support generics.
It supports strongly typed or static typing features.
Anders Hejlsberg developed it in 2012.
TypeScript source file is in ".ts" extension.
It is not directly run on the browser.
It supports object-oriented programming concepts like classes, interfaces, inheritance, generics, etc.
It supports optional parameters.
It compiles the code and highlighted errors during the development time.
TypeScript gives support for modules.
In this, number, string are the interface.
TypeScript supports generics.
Example:-
function addNumbers(a, b) {
return a + b;
}
var sum = addNumbers(15, 25);
console.log('Sum of the numbers is: ' + sum);
Remove the duplicate in the element in array ??
let array = [2, 3, 4, 3, 4, 5];
let dub = array.filter((value, index) => array.indexOf(value) == index);
console.log(dub)
let v = [23,3,3,43,34,34]
let d = [...new Set(v)];
console.log(d);
Promise in JavaScript :
A promise is an object which can be returned synchronously from an asynchronous function. It will be in one of 3 possible states:
• Fulfilled: onFulfilled() will be called (e.g., resolve() was called)
• Rejected: onRejected() will be called (e.g., reject() was called)
• Pending: not yet fulfilled or rejected
const promise = new Promise((resolve, reject) => { const randomNumber = Math.random();
if(randomNumber < .7) {
resolve('All things went well!');
} else {
reject(new Error('Something went wrong'));
}});promise.then((data) => {
console.log(data); // prints 'All things went well!'
},
(error) => {
console.log(error); // prints Error object
}
);
Arrow function:
Arrow functions allow us to write shorter function syntax:
const materials = [
'Hydrogen',
'Helium',
'Lithium',
'Beryllium'
];
console.log(materials.map(material => material.length));
// expected output: Array [8, 6, 7, 9]
Callback function/Higher-order function
A callback function, also known as a higher-order function, is a function that is passed to another function (let’s call this other function “otherFunction”) as a parameter, and the callback function is called (or executed) inside the otherFunction. A callback function is essentially a pattern (an established solution to a common problem), and therefore, the use of a callback function is also known as a callback pattern.
//Note that the item in the click method's parameter is a function, not a variable.
//The item is a callback function
$("#btn_1").click(function() {
alert("Btn 1 Clicked");
});
ul and li - nth element syntax ???
ul li:nth elemnt (n+1,n+4);
Closure
A closure is a function that has access to the parent scope, even after the scope has closed
A closure is the combination of a function and the lexical environment within which that function was declared.
function makeFunc() {
var name = 'Mozilla';
function displayName() {
alert(name);
}
return displayName;
}
var myFunc = makeFunc();
myFunc();
Box Modal
All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout.
The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model:
Box sizing :
width + padding + border = actual width of an element
height + padding + border = actual height of an element
Flex box
The Flexible Box Layout Module makes it easier to design a flexible responsive layout structure without using float or positioning.
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
The flex container becomes flexible by setting the display property to flex:
.flex-container {
display: flex;
}
The flex-direction property defines in which direction the container wants to stack the flex items.
.flex-container {
display: flex;
flex-direction: column;
}
The column-reverse value stacks the flex items vertically (but from bottom to top):
.flex-container {
display: flex;
flex-direction: column-reverse;
}
The row value stacks the flex items horizontally (from left to right):
.flex-container {
display: flex;
flex-direction: row;
}
session vs local storage vs cookies
LocalStorage:
1. Web storage can be viewed simplistically as an improvement on cookies, providing much greater storage capacity. Available size is 5MB which considerably more space to work with than a typical 4KB cookie.
2. The data is not sent back to the server for every HTTP request (HTML, images, JavaScript, CSS, etc) - reducing the amount of traffic between client and server.
3. The data stored in localStorage persists until explicitly deleted. Changes made are saved and available for all current and future visits to the site.
4. It works on a same-origin policy. So, data stored will only be available on the same origin.
Cookies:
1. We can set the expiration time for each cookie
2. The 4K limit is for the entire cookie, including name, value, expiry date, etc. To support most browsers, keep the name under 4000 bytes, and the overall cookie size under 4093 bytes.
3. The data is sent back to the server for every HTTP request (HTML, images, JavaScript, CSS, etc) - increasing the amount of traffic between client and server.
sessionStorage:
1. It is similar to localStorage.
2. Changes are only available per window (or tab in browsers like Chrome and Firefox). Changes made are saved and available for the current page, as well as future visits to the site on the same window. Once the window is closed, the storage is deleted.
3. The data is available only inside the window/tab in which it was set.
4. The data is not persistent i.e. it will be lost once the window/tab is closed. Like localStorage, it works on a same-origin policy. So, data stored will only be available on the same origin.
Grid System
A grid layout consists of a parent element, with one or more child elements.
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
An HTML element becomes a grid container when its display property is set to grid or inline-grid.
.grid-container {
display: grid;
}
All direct children of the grid container automatically become grid items.
You can adjust the gap size by using one of the following properties:
grid-column-gap
grid-row-gap
grid-gap
The grid-row-gap property sets the gap between the rows:
.grid-container {
display: grid;
grid-row-gap: 50px;
}
The grid-gap property is a shorthand property for the grid-column-gap and the grid-row-gap properties:
.grid-container {
display: grid;
grid-gap: 50px 100px;
}
What is NgModule ?
Module in Angular refers to a place where you can group the components, directives, pipes, and services, which are related to the application.
To define the module, we can use the NgModule. When you create a new project using the Angular -CLI command, the ngmodule is created in the app.module.ts file by default and it looks as follows –
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
What is the component ?
Components are the most basic UI building block of an Angular app which formed a tree of Angular components. These components are subset of directives. Unlike directives, components always have a template and only one component can be instantiated per an element in a template. Let's see a simple example of an Angular component
import { Component } from '@angular/core';
@Component ({
selector: 'my-app',
template: ` <div>
<h1>{{title}}</h1>
<div>Learn Angular6 with examples</div>
</div> `,
})
export class AppComponent {
title: string = 'Welcome to Angular world';
}
What are the services ?
A service is used when a common functionality needs to be provided to various modules. Services allow for greater separation of concerns for your application and better modularity by allowing you to extract common functionality out of components. Let's create a repoService which can be used across components,
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
@Injectable({ // The Injectable decorator is required for dependency injection to work
// providedIn option registers the service with a specific NgModule
providedIn: 'root', // This declares the service with the root app (AppModule)
})
export class RepoService{
constructor(private http: Http){
}
fetchAll(){
return this.http.get('https://api.github.com/repositories');
}
}
The above service uses Http service as a
dependency.
what is the lifecycle hook and name them?
A component in Angular has a life-cycle, a number of different phases it goes through from birth to death.
We can hook into those different phases to get some pretty fine-grained control of our application.
To do this we add some specific methods to our component class which gets called during each of these life-cycle phases, we call those methods hooks.
The hooks are executed in this order:
Lifecycle Hooks
These phases are broadly split up into phases that are linked to the component itself and phases that are linked to the children of that component.
Hooks for the Component
constructor
This is invoked when Angular creates a component or directive by calling new on the class.
ngOnChanges
Invoked every time there is a change in one of the input properties of the component.
ngOnInit
Invoked when given component has been initialized.
This hook is only called once after the first ngOnChanges
ngDoCheck
Invoked when the change detector of the given component is invoked. It allows us to implement our own change detection algorithm for the given component.
Important
ngDoCheck and ngOnChanges should not be implemented together on the same component.
Note:
We will cover this hook in more detail in the Advanced Components section at the end of this course.
ngOnDestroy
This method will be invoked just before Angular destroys the component.
Use this hook to unsubscribe observables and detach event handlers to avoid memory leaks.
Hooks for the Component’s Children
These hooks are only called for components and not directives.
Note:
We will cover the difference between Components and Directives in the next section.
ngAfterContentInit
Invoked after Angular performs any content projection into the component’s view (see the previous lecture on Content Projection for more info).
ngAfterContentChecked
Invoked each time the content of the given component has been checked by the change detection mechanism of Angular.
ngAfterViewInit
Invoked when the component’s view has been fully initialized.
ngAfterViewChecked
Invoked each time the view of the given component has been checked by the change detection mechanism of Angular.
what are new features in angular 6?
Angular has come out with some amazing new features in version 6.0.0, especially in Angular-CLI.
ng add
ng add is a new command in Angular-CLI that helps you install and download new packages in your angular apps. It works the same as npm, but it doesn’t replace it.
Ex – ng add @angular/element
ng update
ng update is a new Angular-CLI command too. It’s used to update and upgrade your packages. It’s really helpful, for example, when you want to upgrade from Angular 5 to Angular 6, or any other package in your Angular app.
Ex- ng update @angular/core
Use ng-template instead of template directive
You can use ng-template to render the HTML instead of the template tag in the new version of Angular. ng-template is an Angular element, and it works when it is used with a structural directive such as *ngFor and *ngIf
Upgrading to RxJS 6.0.0
Angular 6 uses the latest version of the Rxjs library. Now you can enjoy the newest features of RxJS 6 in your Angular app.
what are media query and their syntax ??
Media queries can be used to check many things, such as:
• width and height of the viewport
• width and height of the device
• orientation (is the tablet/phone in landscape or portrait mode?)
• resolution
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
Difference between slice() and splice() ?
Splice() ;-
The splice() method returns the removed item(s) in an array and slice() method returns the selected element(s) in an array, as a new array object.
The splice() method changes the original array and slice() method doesn’t change the original array.
The splice() method can take n number of arguments:
Arg1 - Index, Required. An integer that specifies at what position to add /remove items, Use negative values to specify the position from the end of the array.
Arg2 - Optional. The number of items to be removed. If set to 0(zero), no items will be removed. And if not passed, all item(s) from the provided index will be removed.
Arg3 - Optional. The new item(s) to be added to the array.
The slice() method can take 2 arguments:
Argument 1: Required. An integer that specifies where to start the selection (The first element has an index of 0). Use negative numbers to select from the end of an array.
Argument 2: Optional. An integer that specifies where to end the selection. If omitted, all elements from the start position and to the end of the array will be selected. Use negative numbers to select from the end of an array.
0 Comments