Angular Guide

step-1:
Install node js.Download from internet and with installation of node js it also install npm.

step-2;
install VS code.

step-3:
npm install -g @angular/cli
From anywhere you run this command, it will install the angular to your machine.

To check the node js version:
node -v

To check npm version:
npm -v

Angular commands:
To check angular cli version:
a)ng --version

The moment we write
b)ng new CustomerApp
 1)It will get all the basic angular packages under node_modules folder.
 2)It creates project structure.
 3)It will put testing framework.
 4)It will put sample code.
 5)It will put webpack configuration.
 6)It will put typescript configuration.
 7)It will put angular configuration.

c)ng serve --open.  it will open the angular application in browser.
d)ng g c ComponentName
  or
  ng generate component ComponentName.
e)ng build --prod. to compile and build angular application for production and get angular js files to a dist-Appname folder for deploy.

f)ng add @angular/material. for adding angular material into angular app.
g)ng add @angular/flex-layout. for adding angular flex layout into angular app.

Type script commands:
npm install -g typescript. To install type script in my computer,
tsc helloworld.ts -> To generate Javascript file after compilation of typescript.
node helloworld.js -> to run javascript file in VS Code Terminal.

variable declaration in type script:
customerName:string="Raman';

function declaration in type script:
function add(num1:number, num2:number):number{
return num1+num2;
}

function declaration in type script: when one of the passing parameter is optional.
function add(num1:number, num2?:number):number{
return num1+num2;
}
here num2 is optional.
note:
We can have any number of the optional parameter but all of them must come after the required parameters.

function declaration in type script: when one of the passing parameter is set to default value.
function add(num1:number, num2:number=10):number{
return num1+num2;
}

In typescript how to call a child class constructer by:
super(managerName);
Here in typescript, we don't have the concept of constructor overloading.

As there is no protected access modifier in javascript so protected treated as public.

A special way to give access-modifier, declaration, and initialization using a parameterized constructor

constructor(private x?:number,private x?:number)
{
no body required.
}

Module: In typescript, any file consists of classes and having at least one exported class is a module.

Any class to be used outside of the file must be prefixed with the export keyword.

import: In typescript, we can export multiple classes from a module based on what are the classes we want.
import {A,B,C} from "./abcdef"
Here abcdef is typescript file or we can say module in which only A, B, C are exported.
and "./" represents current folder location.

In each file, we can export one or more types these types can be classes, functions, simple variables and objects.

Angular Started:

A component is building blocks for angular.

A component consists of a class and template that represents a view.

angular helps the data values to push into HTML and turn user responses into actions and values updates.

Communication between class component and template: 
There 4 ways of bindings in between Html Template and Component class:
https://www.youtube.com/watch?v=rH-xfNvpm_o&list=PLC3y8-rFHvwgKhaLU8GTyF-5Bb8qT-wzV&index=3
1)Interpolation {{}}  This is one-way data-binding from component class to Html Template.

<h1>{{ pageTitle }}</h1>

2)Property binding [] This is also a one-way data-binding from component class to Html Template. This helps to bind the data to the property of an Html element.

<img [src]="imageUrl" alt="Image">

3)Event Binding() This is also one way binding from Html template to Component Class. With Event Bindings, we can use handlers on user interactions.

<div>

<button (click)="incrementCounter()">Click Me</button>

<p>Clicked Value count: {{count}} </p>

</div>

4)Two-way Binding [()] This combines property and event bindings in a single notation. This ensures that modal and views are always in sync.

<div>

<form name="shankar">

<input type="text" name="shankar" [(ngModel)]="name">

</form>

<p>Welcome: {{name}} </p>

</div>

Split Two-way Binding:

<div>

<input type="text" [ngModel]="userName" (ngModelChange)="userName=$event">

<p>Welcome: {{userName}} </p>

</div>

But we can write multiple lines of code if a change in textbox entry, see below

<div>

<input type="text" [ngModel]="userName" (ngModelChange)="greetOM($event)">

<p>Welcome: {{userName}} </p>

</div>

--method in Component class

greetOM(updatedvalue) {

this.userName = updatedvalue;

if (updatedvalue == "OM")

alert("Welcome back OM");

}

Getters and Setters:

<div>

<input type="text" [(ngModel)]="CustomerName">

<p>Welcome: {{CustomerName}} </p>

</div>

private _customerName: string = "";

get CustomerName(): string {

return this._customerName;

}

set CustomerName(value: string) {

this._customerName = value;

if (value == "OM")

alert("Hello OM");

}

ViewChild Decorator(How to access the dom element in the respective component class using ElementRef)

Step-1:
attach a template ref variable on Html element.

<div>

<input #nameRef type="text" [(ngModel)]="CustomerName">

<p>Welcome: {{CustomerName}} </p>

</div>

step-2:
Create a property of type ElementRef that will hold the reference to this html element.

@ViewChild('nameRef',{static:false}) elementReference: ElementRef;

step-3:
attach the viewchild decorator specifying template reference variable

@ViewChild('nameRef',{static:false}) elementReference: ElementRef;

step-4:
specify what to do in ngAfterViewInit cycle after implementing in component.

ngAfterViewInit() {

this.elementReference.nativeElement.focus();

console.log(this.elementReference);

}

Interaction between different components (Parent and Child)

1. Input() Decorator
2. Getters and Setters
3. ngOnchanges()
4. Template Reference Variable
5. Viewchild()
6. Emitting events
7. Services

An angular component is reusable.
When component is reffered inside another component this established a parent child relation between components.
1. Input() Decorator:
Step-1:
Create one more component saying, child.
Step-2:
Then refer the child selector in parent Html.

A single parent login component maintains the login states and informations and passes to the all child components using Input decorator.

Refer the parent component property value in child component property.

<app-child [loggedIn]="userLoggedIn"></app-child>

Pass the parent property value to the child selector as a child property value. and then using input decorator receive it in child component and write the code for received value.

@Input('loggedIn') loggedFlag: boolean;

<p *ngIf="loggedFlag">Welcome back!</p>

2. Getters and Setters:

Child Component.ts

message: string;

private _loggedFlag: boolean;

get LoggedIn(): boolean {

return this._loggedFlag;

}

@Input()--indicates that value will be passed from parent component.

set LoggedIn(value: boolean) {

this._loggedFlag = value;

if (value == true)

this.message = "Welcome Back OM";

else

this.message = "Please login";

}

child Html

{{message}}

App compnent.Html

<button (click)="userLoggedIn=true">Log In</button>

<button (click)="userLoggedIn=false">Log Out</button>

{{userLoggedIn}}

<app-child [LoggedIn]="userLoggedIn"></app-child>

App component.ts

userLoggedIn : boolean;

3. ngOnchanges():
Step-1:
First implement onchanges to child component

export class ChildComponent implements OnChanges {

Step-2:
declare LoggedIn Property with input decorator.

message: string;

@Input() LoggedIn: boolean

Step-3:
Work on ngOnChanges method whenever there is a change in input property of the component.

ngOnChanges(changes: SimpleChanges) {

console.log(changes);

const loggedValue = changes["LoggedIn"];

if (loggedValue.currentValue == true)

this.message = "Welcome Back OM";

else

this.message = "Please log in";

}

child Html

{{message}}

App compnent.Html

<button (click)="userLoggedIn=true">Log In</button>

<button (click)="userLoggedIn=false">Log Out</button>

{{userLoggedIn}}

<app-child [LoggedIn]="userLoggedIn"></app-child>

App component.ts

userLoggedIn : boolean;

note:
ngOnChanges work only with the child component.
we should use getter and setters approach if there are only one property changes. But if there are a lot of property we have to keep track of then ngOnChanges is a suitable choice.
Here we have options for prev value changes, current value changes, and first change.

4. Template Reference Variable:
A parent component can directly access the properties and function of the child component.
In App.component.Html we declared the child element with template reference. With this reference name we are accessing the property and functions directly of a child component.

<app-child #child [LoggedIn]="userLoggedIn"></app-child>

{{child.name}}

<button (click)="child.GreetOm()">Greet Me</button>

Child component

name = "OM";

GreetOm() {

alert("Hey Om");

}

5. Viewchild():
Step-1:
Create a property that will hold the child component reference in parent component.

@ViewChild(ChildComponent, { static: false }) childComponentRef: ChildComponent;

implement ngAfterViewInit on the parent component.

ngAfterViewInit() {

this.childComponentRef.message = "Message from parent Component";

}

6. Emitting events:
Using Output decorator, A common method will be written in a parent component which all the child's components will execute by sending event using EventEmitter.
using an EventEmitter class the child components emits an event with passing parameter.
Using EventEmitter and Output parameter we can out any custom event to the parent.

Child Html-click generates a event

<button (click)="greetingToParent()">Send to Parent</button>

Child Component-emits the custom event to out.

@Output() greetEvent = new EventEmitter();

name = "OM";

greetingToParent() {

this.greetEvent.emit(this.name);

}

Here greetEvent is the custom event for parent to bind with its own method.

<app-child (greetEvent)="GreetFromChildToParent($event)"></app-child>

Here $event helps to pass the parameter

GreetFromChildToParent(message: string) {

alert("Message sender from child" + message);

}

7. Services [Using a Service]
This option tells the way to communicate between components using a service.
Here we will use the subject for component interaction.
It uses subscribing techniques. Like how many child components subscribe to the subject that many components will get responses from the parent component.

In this approach, there could be no relation between the components.

step-1:
Create a subject and express the subject as an observable.

export class InteractionService {

constructor() { }

private _teacherMessageSource = new Subject<string>();

teachermessage$ = this._teacherMessageSource.asObservable();

Step-2:
Send the message from the teacher component to the subject.

sendmessage(message: string) {

this._teacherMessageSource.next(message);

}

Step-3:
Subscribe to the subject from the student components.
So that students can react to any messages received from the teacher.

<h1>Teacher</h1>

<button (onclick)="greetstudent()">Greet student</button>

<button (onclick)="appreciateStudent">Appreciate Student</button>

<app-child></app-child>

constructor(private _interactionService: InteractionService){

}

greetstudent() {

this._interactionService.sendmessage("Good Morning");

}

appreciateStudent() {

this._interactionService.sendmessage("Well Done");

}

Angular in one bucket:
https://www.centric.eu/NL/Default/Craft/Blogs/2018/01/25/Angular-components-How-to-talk-to-your-children-and-listen-to-what-they-have-to-say

Angular Material:
https://www.youtube.com/watch?v=bV8emCBmFHk&list=PLC3y8-rFHvwilEuCqFGTL5Gt5U6deIrsU


Temp:
https://gaana.com/playlist/gaana-dj-ye-jo-mohabbat-hai-rajesh-khanna
https://www.youtube.com/watch?v=oMgvi-AV-eY
https://www.youtube.com/watch?v=FV2MXOygDTM
https://www.youtube.com/watch?v=cxGh2YFehvs
https://cli.angular.io/
https://www.youtube.com/results?search_query=typescript+tutorial+for+beginners
https://www.youtube.com/watch?v=xqYD8QXJX9U
https://angular.io/guide/http
https://code.visualstudio.com/docs/getstarted/introvideos
https://alligator.io/angular/angular-material-2/
https://blog.angularindepth.com/angular-flex-layout-the-masquerade-58fb58d0ab45
https://blog.angularindepth.com/angular-flex-layout-flexbox-and-grid-layout-for-angular-component-6e7c24457b63
https://www.toptal.com/angular/angular-5-tutorial
https://www.npmjs.com/package/angular-walkthrough
https://www.edureka.co/blog/angular-tutorial/
https://www.youtube.com/watch?v=r-xlmXE7bJU
https://www.youtube.com/watch?v=60k3EOu2Pf8
https://www.youtube.com/watch?v=_g1Cb1u9rLk
https://www.youtube.com/watch?v=h3iK6uItrqA
https://www.youtube.com/watch?v=WuDC_6gyvcQ
https://www.youtube.com/watch?v=htPYk6QxacQ
https://www.youtube.com/watch?v=UnKsoCeTdEI
https://www.youtube.com/watch?v=_4UWa8Vw3M0
https://www.youtube.com/watch?v=-bMdCxCmDRk
https://www.youtube.com/watch?v=kFTmoLm9Jwg
https://www.youtube.com/watch?v=DAUlZO2RALw
https://www.itechtics.com/copy-urls-of-all-open-tabs-in-all-browsers-chrome-firefox-opera-ie/
https://superuser.com/questions/117754/is-there-a-way-to-copy-urls-from-all-open-tabs-in-a-google-chrome-or-other-brow
https://www.udemy.com/topic/angular/free/

https://www.youtube.com/channel/UC80PWRj_ZU8Zu0HSMNVwKWw/playlists

Form Control in Angular:
https://www.concretepage.com/angular-2/angular-2-formcontrol-example

Text Formatting for kendo Grid:
https://www.c-sharpcorner.com/blogs/text-formatting-in-kendo-ui-grid-with-angular6

Install froala editor in angular:

https://npm.runkit.com/angular2-froala-wysiwyg-base

1)npm install angular2-froala-wysiwyg --save

2)"node_modules/font-awesome/css/font-awesome.css",

  "node_modules/froala-editor/css/froala_editor.pkgd.min.css"

3)"node_modules/jquery/dist/jquery.min.js",

  "node_modules/froala-editor/js/froala_editor.pkgd.min.js"

  

4)<div [froalaEditor] [(froalaModel)]="node.Why"></div>

Angular tricks:
In this case while binding value to Html using interpolation, instead of binding directly property we will use object member as a property to bind.

How to use *ngFor:
<app-blog-post-tile *ngFor="let post of blogPost" [post]="post"> </app-blog-post-tile>

Using Pipes in Angular
ng generate pipe trucncate
return of this function will render back to the control.
Pipe is a function which prcessess our data from an input and return an output
<p class="card-text">{{ post.summary | truncate[30] }}</p>

here 30 is the passing parameter.
return of trucate function will be render here to the paragraph.
write what you want to do inside transform function.
We can define common functions here that can be reused like LPAD(18,'0').
It is possible to calling pipe inside Angular components. For that first we have to pass the the pipe to the constructor. And also we have to add the pipe in the provider.

Child to parent call:
Child component should not be aware of parent method. It should just trigger an event that hey click happen at the child component level. It's parent component job is to listen to this event and do the right thing. child will use @Output and EventEmitter to send the event.
Whatever we the name we will give the EventEmiter name has to be bind by parent.

Using View Encapsulation
Css applied to component will not impact to any other component.
Angular styling is restricted to comonent.
But there is a way to remove the restriction and apply to everywhere wherever it loads
encapsulatio:ViewEncapsulation.None; by default it s Emulated so restricted to particular component only.

Using host selector?
Using ViewChildren:
@ViewChild('nameRef',{static:false}) blogPostTileComponent: BlogPostTileComponent -child
@ViewChildren('nameRef',{static:false}) blogPostTileComponents: QueryList<BlogPostTileComponent> -children

expandAll()
{
this.blogPostTileComponents.Foreach(e=>e.ShowFullSumary());
}

Creating and using service:
Move the logics from component to service.
Business logics should be kept inside services.
We will inject the service to the component for use because we have specify in the provider.
constructor(private blogDataService: BlogdataService){}
this.bloggPosts=this.blogDataService.getData();

Understanding smart vs dumb components
Feeded data component is  dumb component. It is also named as presentational componet.It is reusable.
Controlled component is a smart component. It will have service calling.

commonNote:
Pipes and services are mentioned in a provider. What is the use of provider?

An angular application is a tree of components.

ag-Grid row column operations.
https://www.youtube.com/watch?v=zL-MpeTZDkw&list=PLT2UBNZhcQdmnbhY8Y3ElucziqcwFFaOw&index=2
gridReady Event and Callback

How to use ngClass
[ngClass]="(loop > eightDNumber)? 'bg-warning border border-dark my-2':'bg-success border border-dark my-2'"

Build for production before deployment.
ng b --prod

https://stackoverflow.com/questions/52477152/moment-is-not-defined-in-angular

https://stackoverflow.com/questions/53327329/aggrid-angular-add-element-icon-on-a-row-column

https://github.com/ag-grid/ag-grid/issues/212

For global filter in kendo grid
https://stackblitz.com/edit/angular-9tdyza-kjcj9a?file=app/app.component.ts

https://decembersoft.com/posts/typescript-vs-csharp-linq/#where

No column menu in ag grid in community version.
https://www.ag-grid.com/javascript-grid-column-menu/

How to apply kendo gridd:
step-1
Install kendo grid
https://www.telerik.com/kendo-angular-ui/getting-started/
ng add @progress/kendo-angular-grid

Step-2:
Kendo grid feature.
https://www.telerik.com/kendo-angular-ui/getting-started/
https://www.telerik.com/kendo-angular-ui/components/grid/filtering/reusable-filter/
https://www.youtube.com/watch?time_continue=318&v=AAgAWJEbWIg

Using Tslint for correcting codes.
https://www.codeproject.com/Articles/1261317/Analyze-Fix-your-Angular-6-code-using-TSLint

Implementation of froala:
Froala license is domain url based.

Environmental variable has to be used with backtick character in angular
`${environment.variableName}`

step-1:
add these lines to package.json

"angular-froala-wysiwyg": "2.7.1",
"froala-editor": "2.7.1",

step-2:
run npm install
npm i

It will add the same in package.lock

Step-3:
Update angular.json"styles": [
              {
                "input": "node_modules/@progress/kendo-theme-default/dist/all.css"
              },
              "src/styles.scss",           
              "node_modules/froala-editor/css/froala_editor.pkgd.min.css",
              "node_modules/froala-editor/css/froala_style.min.css",
              "node_modules/font-awesome/css/font-awesome.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/froala-editor/js/froala_editor.pkgd.min.js"
            ]

Step-4:
Include the module

Step-5:
Include the directive in html and input options for directive.

Some important links related froala:
https://stackoverflow.com/questions/51387254/froala-editor-hide-image-edit-option-in-angular-6

'fullscreen','bold','italic','underline','strikeThrough','subscript','superscript','fontFamily','fontSize','align','clearFormatting','color','paragraphStyle','paragraphFormat','formatOL','formatUL','indent','outdent','quote','insertLink','emoticons','specialCharacters','insertHR','undo','redo','insertTable','html'

['fullscreen', 'bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', 'fontFamily', 'fontSize'
  , 'align', 'clearFormatting', 'color', 'paragraphStyle', 'paragraphFormat', 'formatOL', 'formatUL', 'indent', 'outdent'
  , 'quote', 'insertLink', 'emoticons', 'specialCharacters', 'insertHR', 'undo', 'redo', 'insertTable', 'html']

How to load an Angular project:
Git Clone the application
open node js command prompt
navigate to package json file location then 'npm install'.

Export Excel Feature from Kendo Grid:
https://www.telerik.com/kendo-angular-ui/components/excelexport/filtering/


How to create a custom environment for sandbox in Angular:
https://medium.com/@balramchavan/configure-and-build-angular-application-for-different-environments-7e94a3c0af23

Nice Angular Tutorials:
https://www.youtube.com/watch?v=H2TUbmlh4YQ&list=PLLhsXdvz0qjL1HVD2jAtlvoDmS5qj0OvA