❖ Both JIT and AOT are used to compile Angular Typescript components to
Javascript, because browser understands Javascript not Typescript.
ANGULAR COMPILE DETAILS
Just-in-Time (JIT) Compiles your application in the browser at runtime.
This was the default until Angular 8.
Ahead-of-Time (AOT) Compiles your application and libraries at build time.
This is the default starting in Angular 9.
❖ All the latest Angular versions use AOT to compile Typescript to Javascript.
❖ Advantage of AOT - Loading in AOT is much quicker than the JIT, because it
already has compiled your code at build time.

❖ Components are the most basic UI building
            block of an Angular app.
            ❖ Remember Angular is a Single Page
            Application.
            For example, in the image we have single page
            with multiple components. These components
            will be replaced by the new components to
            display the data but the page will remain same.
            So, all these small-small components are like the
            building block only

  ❖ A Template is a HTML view of an Angular
            component.
            ❖ And templateUrl is the link of the HTML
            template file.
          

❖ 5 Steps executed when client send request
            from browser:
            1. First, request hit index.html page.
            2. Second, Index.html will invoke main.js
            file(which is the javascript version of main.ts
            file.)
            3. Third, main.ts compiles the web-app and
            bootstraps the app.module.ts file.
            4. Fourth, App-Module file will then bootstrap
            the app-component.
            5. Finally, the App-component html will be
            displayed.

4. Fourth step is, App-Module file will then
              bootstrap the app-component.
              In the image, you can see how app.module.ts has
              bootstrapped the AppComponent file.
              5. Fifth step is, App-component html will be sent
              to client and displayed in the browser.

❖ The module which loaded first, when the Angular application start is called
              Bootstrapped module.
              ❖ By default, AppModule is the Bootstrapped module in Agular project.

❖ The component which loaded first, after
              the module is called Bootstrapped
              component.
              ❖ By default, AppComponent is the
              Bootstrapped component in Agular
              project

❖ String Interpolation is a one-way data-binding technique that is
            used to transfer the data from a TypeScript code(component)
            to an HTML template (view).
            1. String interpolation can work on string type only not numbers or
               any other type.
            2. It is represented inside {{data}} double curly braces.

❖ Property binding is a superset of interpolation.
              It can do whatever interpolation can do. In addition, it can set an
              element property to a non-string data value like Boolean.
              ❖ When to use property binding and when to use interpolation?
              1. When you want to transfer string only, then use interpolation
              because of its simplicity(just {{data}}) to use.
              2. When you want to transfer any type other than string, then
              use property binding.

❖ Directives are classes that add additional behavior to elements
              in your Angular applications.
        
              ❖ For example, in below image, we can change the color of
              button element by using directives. 

❖ Types of Directives:
              1. Structural Directives are classes that
              change appearance of DOM by adding or
              removing elements.
              2. Attribute directives change the
              appearance or behavior of an element.
              3. Component directive are directives with
              its own template.

❖ Angular decorators store metadata about a class,
              method, or property.
              For example, in image @Component decorator store
              metadata information about the app-component.
              Metadata
              ❖ All decorators are represented with @ symbol.
              ❖ What is Metadata?
              Metadata is "data that provides information about
              other data“.
              For example, in image we have a book. Now things like
              author name, title, price, publisher etc etc, all this
              information about the book is metadata only.
              Meaning metadata gives you some information about
              the book, but it is not the main content or data of the
              book. This is metadata.

 ❖ Here are the Types of decorators – Class, Property, Method and
                    Parameter are the categories of decorators. We will use these
                    decorators later in different parts of the Angular applications.

❖ Pipes are simple functions which accept an input
              value and return a transformed value.
              For example, in image the input is “Interview Happy”
              and the transformed value is “interview happy”

❖ Types of Pipes:
              1. Built-in Pipes are provided by Angular framework. Like lowercase,
              uppercase, date etc.
              2. Custom pipe, we can create and develop ourselves.

❖ The chaining pipes use multiple pipes on a data input.
            For example, in below image one pipe is for slice and then other
            pipe will further transform the result to uppercase
            

❖ A service is a typescript class and reusable
            code which can be used in multiple
            components.
            ❖ How to use services in components?
            Service can be implemented in components with
            the help of dependency injection.

❖ 4 Steps to inject service dependency in the component:
              1. First step is, create the service – (LoggingService).

❖ A provider is an object declared inside decorators which inform
              Angular that a particular service is available for injecting inside
              the components.
              Provider can be set in module or in the component as shown below.

❖ With @Injectable decorator one service can be
              used by another service.
              For example, in image we set the LoggingService as
              Injectable. That means, now any other service also
              can use LoggingService methods.

❖ Parent component is the outer component.
              ❖ Child components are the components inside the
              parent component.
              ❖ Most of the time app-component is only the parent
              component and rest of the components are child
              components
              

❖ A component from creation to destruction goes
              through several stages and these stages are the
              life cycle hooks.
              ❖ The stages will cover activities like:
              • Component instantiating.
              • Rendering the component html view.
              • Creating the child components(optional).
              • Destroying the component.
              ❖ Angular provides these hooks, inside them we
              can code for appropriate functionality.
              

❖ The constructor is a method in a TypeScript class
            that automatically gets called when the class is
            being instantiated.
            ❖ Whether constructor is a life cycle hook?
              Constructor always run before any angular hook and it
              is not a part of Lifecycle Hooks.
            ❖ One example, when we have to write code
            inside constructor?
            Constructor is widely used to inject
            dependencies(services) into the component class.
            

❖ Routing helps in navigating from one view to
              another view with the help of URL.
              See here we have two Component links, Component 1
              and Component 2 in App-Component.
              Now when I click Component 1 link, then the url is
              updated to component1 and the component displayed
              is component 1.
              Then when I click Component 2 link, then the url is
              updated to component2 and the component displayed
              is component 2.
              So, in a single page we are navigating from one
              component to another component, that is routing.
              

❖ What is the advantage of Observable over Promises?
              1. In Observable, streaming of data will display continuous data
              to end user. So, the user has not to wait.
              In Promises, end user have to wait until the whole data is not
              available, which is not good.
              2. Observables are lazy, means they will not execute until
              someone subscribe them, which is a good thing.
              Promises are not lazy, means they will immediately execute
              even if there is no subscriber, which is not good. 

❖ Observables are used to stream data to multiple components.
              ❖ Basically, to receive the data from API’s and continuously stream it
              to the multiple components.
              ❖ It’s a 3 step process:

❖ HttpClient is a built-in service class provided by Angular, which is used to
              perform HTTP requests(GET/POST/PUT/DELETE) to send and receive data
              from API or Servers.
              ❖ Package name is - @angular/common/http package
              

❖ 3 Steps to fetch data with HTTPClient &
              Observables:
              Suppose we want to fetch a list of students from API.
              1. Create a service and configure observable and
              HTTPClient to receive the data from the API.
              2. In the component class file, use Subscribe method
              to receive the data sent by the observable.
              3. Finally in component HTML file, use the for loop to
              iterate and display the data list.

❖ Typescript is an open-source programming language.
            It’s advantage are:
            1. Typescript is a strongly typed language.
            2. Typescript is a superset of JavaScript.
            3. It has Object oriented features.
            4. Detect error at compile time.
            ❖ In image, you can see TS(Typescript) contains
            JS(Javascript) and other additional features(type
            system, custom types, generics, enums, interfaces).
            ❖ Browser can’t execute typescript, so finally TS
            Compiler will convert the TS to JS only, which
            browser can understand.

❖ Type annotations helps the compiler in checking the
              types of variable and avoid errors.
              For example, in below image when we set variable “i” as
              number. And now if you assign “i” a string or Boolean
              value, then Typescript will show the compile time error,
              which is good. 

❖ Built-in Data types are used to store simple data. Such as
              string, number, Boolean.
              ❖ User-Defined types are used to store complex data. Such as
              array, enum, classes

❖ When a value is of type any, then no typechecking(no compile
            time errror) will be done by compiler and the flexibility is there
            to do anything with this variable.
            For example, see in the image there is no compile time error for
            assigning different types to variable “x” because it is of any type.

❖ Enums allows to define a set of named constants.
              Suppose you have a family of constants(Directions)
              like this in image.
              Now if you want to insert some direction, for
              example SouthWest between 1 and 2, then it will be
              a problem, as you have to change this in all of your
              application.
              So here enum is a better way as you don’t have to
              assign the numbers then

❖ void means no type. It is used when the function
            will return empty.
            In image, fnVoid() function will return empty.
            ❖ never means it will return never. It is used to
            throw error only.
            For example, in image fnNever function which will
            not reach to its last line, and it always throws an
            exception.
            

❖ Type assertion is a technique that informs the compiler about the type
              of a variable.
              For example, in below image, if we do not put , then typescript will
              try to assume the type of “secondname” by itself automatically.
              But by putting , we are asserting and informing the compiler about
              the type of secondName as String and now compiler will not do automatic
              typechecking.

❖ An arrow function expression is a compact alternative to a
              traditional function expression.
              In below image, you can see how the same function can be
              written using arrow function.

❖ Object oriented programming is used to design structured
              and better applications.
              In the image, you can see the concepts used in object oriented
              programming

❖ The constructor is a method in a TypeScript class
              that automatically gets called when the class is
              being instantiated.
              ❖ Constructor is widely used to inject
              dependencies(services) into the component class.
              ❖ Constructor always run before any angular hook
              and it is not a part of Lifecycle Hook

❖ 3 types of Access modifiers in Typescript:
              1. The public modifier allows class varibale, properties
              and methods to be accessible from all locations.
              2. The private modifier limits the visibility to the sameclass only.
              3. The protected modifier allows properties and methods
              of a class to be accessible within same class and within
              subclasses/derived/child. 

❖ Encapsulation is the wrapping up of data and function
              together to access the data.
              For example, here in code _empId is the data. We can make it
              public and then it can be accessible outside the Employee class.
              But as per OOPS concept encapsulation this is wrong as it can
              lead to data security issues.
              Therefore, we should mark this _empId data as private. And
              then create a function(getEmpId), which will help in accessing
              this _empId outside of this class.
              Outside the class, in the last line we are calling getEmpId
              method to access/dispaly the data _empId.
              ❖ What is the advantage of Encapsulation?
              This is good for data security to prevent direct data access.

❖ Inheritance is a feature where derive class
              will acquire the properties and methods of
              base class.
              For example, in the image Dog and Cat class are
              derived from Animal base class.
              Therefore, Eat() and Sleep() methods of Animal
              base class will be automatically available inside
              Dog and Cat derived class without even writing
              it.
              ❖ What is the advantage of Inheritance?
              Inheritance is good for reusability of code. As
              you can write one method in base class, and
              then use it in multiple derived classes.
              

❖ Polymorphism means same name method
              can take multiple Forms.
              For example, in the image Son can inherit the
              GetSurName() method implementation of
              father. But the GetName() method
              implementation should be different for son. So
              son can have a different implementation but the
              method name can be same as GetName().
              ❖ What is the advantage of Polymorphism?
              Like in dictionary, a word “Running” can have
              multiple meanings: Running a race or Running a
              computer.
              Similarly in programming, Polymorphism can be
              used to do multiple things with the same name.

❖ An interface is a contract where methods are only declared.
              ❖ What is the advantage of creating Interface?
              For example, we have multiple classes PermanentEmployee,
              ContractEmployee etc.
              They all must have the Role() method, but the body of Role()
              method can be different.
              Now to maintain consistency we will create the Interface
              IEmployee, with just declaration of Role() method and
              implement this interface in all the classes.
              This will make sure all the Employees classes are in sync with the
              Role method. It will also help in unit testing.
              ❖ One advantage is, multiple inheritance can be achieved via
              interfaces only.
              ❖ Also, if we create interfaces for the classes in application
              then unit testing is very easy, otherwise it is difficult.
              

❖ Multiple inheritance means when one derived class is inherited from multiple base classes.
            ❖ Multiple inheritance in typescript only possible via Interfaces.
            See in first image there is the compile time error in Employee2 as multiple base classes are not
            allowed, but in second image with multiple interfaces iit is working.
            Q

❖ Angular forms are used to handle user's input.
              For example, login form, registration form, feedback
              form, update profile form etc etc.
              All these are forms, in which user will input and then
              submit the information.

❖ 4 steps data flow process in Angular forms1. The user will input the data in the HTML template file. .
              2. Then data will be bind in the component typescript class file.
              3. Then it will be sent to the Angular service.
              4. Angular service will then finally send it to the Server which will
              receive the data and process the data. (In most cases this
              server will be an API only.)

❖ There are 2 types of forms in Angular:
              1. Template driven forms - In template driven
              forms, most of the code will be written and
              handled in HTML templates only.
              2. Reactive forms - in reactive forms most of the
              code will be written in component typescript
              class file.

❖ Form groups is a collection of form controls.
              ❖ Form controls are the individual elements.

❖ What is the use of FormGroup and FormControl?
              Both FormGroup and FormControl are used to track
              the values and states of controls.
              In image you can see, both formgroup and
              formcontrol are inherited from AbstractControl
              class. AbstractControl class has these properties -
              Value, errors, valid, invalid, dirty, pristing, touched
              and touched.
              Now these properties will help in tracking the
              changes in each and every control. For example,
              value property will be the value of any input field.
              That’s why FormGroup and FormControl are
              required to keep track of the changes in the
              controls.
              

❖ Below are some important points about Reactive Forms:
              1. In reactive forms most code and validation logic is
              written in component typescript file.
              2. Reactive Forms can be activated by adding
              ReactiveFormsModule in AppModule.
              ❖ When to use Reactive forms and when to use template
              driven forms?
              Reactive Forms are used when application is complex and
              have more number of controls.
              Template driven forms is used when number of controls are
              very less in the form.
              Normally we prefer reactive forms in general.

❖ JWT authentication is a process to authenticate Angular user
            credentials to get or post data from API’s.
            Upcoming is the image, where we will see, how the request will start
            from Angular and what are the steps to authenticate the request and
            get the data back from the API.

❖ Steps to implement JWT Authentication
            in Angular:
            1. Create a reactive login form, setup
            email and password.
            2. Create one SubmitLogin method and
            check whether login form is valid or
            not.
            3. If valid, call service(AuthService)
            method(proceedLogin) and send the
            loginForm values and use subscribe
            method to get the result from the
            observable.
            4. Store the token in local storage of
            browser. So that for next subsequent
            request, only token is sent, not the
            credentials again.

5. Create Service(AuthService).
              6. Inside service set API URL(apiurl)
              7. Setup HTTPClient to send the request using API url.
              8. Use Observalbe to receive the data or toke from the
              request and return it to the component.
              ❖ Why we created service and have not directly
              written this code in component?
              So that all the components can use this reusable
              service method.

❖ Auth guard is used for guarding the routes.
              For example, in the image, suppose you are at this login url. Now without entering
              the username and password, by just changing the url manually, you want to go to the
              home component. This is not right. So, to prevent this action we use auth guards.
              This guard will redirect your request to some other component which you will set in
              the guard or to the login component only.
              

Suppose your angular is requesting something from the API.
              But the API is down or there is some network issue. Then you
              want your Angular App to retry again automatically.
              ❖ The answer is we will use Retry operator of RxJS library.
              In image, inside the interceptor if connection fail one time,
              then Angular will automatically retry 3 more times to make
              the request.

❖ When we have multiple components in a single
              page application. Then many a times we have to
              send and receive data and content(html) from
              one component to another component. This is
              called communication between components.
              ❖ We also call these communicating components
              as parent and child components.

❖ Template Reference Variable in angular is used
            to access all the properties of any element
            inside DOM.
            For example, in mage #inputBox is the template
            reference variable of that input element. Then the
            getInput(inputBox.value) method is used to
            transfer the value property of the #inputBox.
            That’s how we can send different properties of
            template reference variable to component class
            file.
            Then in next image, we are receiving the value
            property in the parameter and printing it via
            console.log.
            

❖ @ViewChild decorator is used to access elements of html
              template file from the component typescript file.
              For example, in image you can see emailRef is the template
              reference variable in html file and it is accessed in component class
              via @ViewChild decorator.
              

❖ When to use @viewchild?
              1. When we want to access the element of html component file in the component
              class file of same component.
              2. When we want to access the element of child html component file in the parent
              component class file.

❖ @ViewChildren does the same thing as @ViewChild decorator,
              but @ViewChild can access only one element, but
              @ViewChildren can access a list of elements.

❖ QueryList used to manage the list of elements.
              ❖ It is used with @ViewChildren to refer the list of
              elements of type ElementRef. 

❖ ContentChild is used to send
              variable or projected content from
              one component html to another
              component class file.
              ❖ To access the element in child
              component, we have to write the
              code inside the ngAfterContentInit
              lifecycle hook of the child
              component class file.

❖ @ContentChildren does the same thing as @ContentChild decorator,
            but @ContentChild can access only one element, but
            @ContentChildren can access a list of elements.