Angular Q&A

1️⃣ Promises and Observables difference ( 1 )

💡 Promises And Observables are used for performing the Asynchronous operation

Promises: ↩️

⚡feature of Javascript ( es6 and later on), therefore can be used in NG also

⚡Promises have the then, catch and finally methods for doing different things depending on the outcome of a promise. In summary:

• then: when a promise is successful, you can then use the resolved data
• catch: when a promise fails, you catch the error and do something with the error information
• finally: when a promise settles (fails or passes), you can finally do something

⚡States of Promise

• pending: the promise is still in the works
• fulfilled: the promise resolves successfully and returns a value
• rejected: the promise fails with an error

🚦Examples

JavaScript ES6

Observables:↩️

⚡feature of angular alone

2️⃣Version of Angular used

💡We should be using at least node version 6 to support most of the ES6 features

⚡Angular Version 10

3️⃣Give an Explanation of the project handled

Explain

4️⃣What is a Media Query

💡Media queries are a vital part of responsive web design, as they allow you to create different layouts depending on the size of the viewport

Syntax

@media media-type and (media-feature-rule) {
  /* CSS rules go here */
}

🚦Example

@media screen and (max-width: 500px){
       .container{
           background-color: black;
           color: white;
       }
}

Media types

The possible types of media you can specify are:

• all
• print
• screen

🚦Examples

Beginner's guide to media queries - Learn web development | MDN

5️⃣Let vs Var vs Const

⚡Variable Hoisting — Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution. This means that if we do this:

⚡Scope

• Var is Hoisted, which means you can use it without defining it and not get an error
• Var once redefined inside a block, can be accessed outside of that block also
• Let throw a reference error
• let is block scoped, Cannot access outside of a Block

💡const = { } can be re-initializing and the value can be modified
💡const = value cannot be re-initialized

🎆Examples

Hoisting in JavaScript with let and const - and How it Differs from var

6️⃣ Decorators

💡The whole purpose of Angular decorators is to store metadata about a class, method, or property. When you configure a component.​

• Class decorators, such as @Component and @NgModule​​
• Property decorators for properties inside classes, such as @Input and @Output
• Method decorators for methods inside classes, such as @HostListener​
• Parameter decorators for parameters inside class constructors, such as @Inject

🎆Examples

Decorators in angular

7️⃣ Cascading in CSS / Specificity

The selectors or inline styling has a specific priority in CSS. In this way the styling will be overridden

🎆Examples

Specifics on CSS Specificity | CSS-Tricks

8️⃣ Authentication vs Authorisation

💡Authentication is the process of verifying who a user is, while authorization is the process of verifying what they have access to.

🎆Examples

Comparing these processes to a real-world example, when you go through security in an airport, you show your ID to authenticate your identity. Then, when you arrive at the gate, you present your boarding pass to the flight attendant, so they can authorize you to board your flight and allow access to the plane.

9️⃣ Pure and Impure Pipes

💡A pure pipe is only called when Angular detects a change in the value or the parameters passed to a pipe. An impure pipe is called for every change detection cycle no matter whether the value or parameter(s) changes

{{ Data | uppercase}}

💡Change detection can be triggered either manually or through an asynchronous event (for example, a user interaction or an XMLHttpRequest completion).

⚡When writing a custom pipe in Angular you can specify whether you define a pure or an impure pipe:

@Pipe({
  name: 'filterPipe', 
  pure: false/true        <----- here (default is `true`)
})
export class FilterPipe {}

Pure vs Impure Pipe in Angular

1️⃣0️⃣ Arrow functions

💡An arrow function expression is a compact alternative to a traditional function expression, with some semantic differences and deliberate limitations in usage: Arrow functions don’t have their own bindings to this , arguments , or super , and should not be used as methods

Arrow Function use cases

1️⃣1️⃣ Data passing between Parent ↔️ Child

💡There are two ways to send data from Parent to child

⚡Using the @Input @Output Decorators

Angular

⚡@ViewChild()

1️⃣2️⃣ Implements Vs Extend in Angular

1️⃣3️⃣ Features of Angular, What is angular

1️⃣4️⃣ Implements Vs Extend in Angular

1️⃣5️⃣ Module in Angular

💡The module can be considered a collection of components, directives, services, pipes, helpers, etc.

💡@NgModule takes a metadata object that describes how to compile a component's template and how to create an injector at runtime

• The module is a container for the different parts of an application.
• The module is a container for the application controllers.
• Controllers always belong to a module.

🎆Examples

Understanding Angular Modules