Angular Flashcards
What Is Ng-Content?
You use the tag as a placeholder for that dynamic content, then when the template is parsed Angular will replace that placeholder tag with your content.
You can put lots of different things inside the component. Including HTML tags and even other components.
What is Ivy about in Angular?
Your JS framework is a compiler. It’s true for most JS frameworks out there, but it’s especially true for Angular. Let me rewind a little to make sure we are on the same page.
In Angular, when your write a component, you write the component in TypeScript and its template in HTML, augmented by Angular template syntax (ngIf, ngFor, etc.).
The thing a lot of developers don’t really know is that this HTML will never touch the browser. It will be compiled by Angular into JavaScript instructions, to create the appropriate DOM when the component appears on the page, and to update the component when its state changes. That’s why a big part of Angular is its compiler: it takes all your HTML and generates the necessary JS code. This compiler (and the runtime) has been completely rewritten over the last year, and this is what Ivy is about.
Smaller bundles, faster compilations, Better debugging, dynamic loading of module and components and advanced concepts like Higher order components.
What is the difference between dependencies, devDependencies and peerDependencies?
dependencies are the packages your project depends on.
devDependencies are the packages that are needed during the development phase. Say a testing framework like Jest or other utilities like Babel or ESLint.
In both cases, when you install a package, its dependencies and devDependencies are automatically installed by npm.
peerDependencies are different. They are not automatically installed.
When a dependency is listed in a package as a peerDependency, it is not automatically installed. Instead, the code that includes the package must include it as its dependency.
npm will warn you if you run npm install and it does not find this dependency.
*ngFor
how to get index of each element?
how to get first and last value?
how to mark even and odd elements?
*ngFor=”let element of array; let i = index”
*ngFor="let element of array; let first = first; let last = last"
[ngClass]="{ first: first, last: last }"
*ngFor="let element of array; let even = even; let odd = odd"
[ngClass]="{ odd: odd, even: even }"
How to create reusable Component (for more than one type of content)?
With NgTemplateOutlet in Angular.
The single responsibility principle is the idea that pieces of your app should have one purpose. Following this principle makes your Angular app easier to test and develop. For example we will be breaking a CardOrListViewComponent into 🐊 bite-sized pieces with the help of NgTemplateOutlet. Using NgTemplateOutlet instead of creating specific components allows for components to be easily modified for various use cases without having to modify the component itself!
The CardOrListViewComponent displays items in a card or a list format depending on its mode.
How to do conditionals with ng-content?
<div>
</div>
<div>
</div>
Explanation: This is done because if you have multiple ng-content of same types (e.g. card-body, card-icon or blank) then the last ng-content in your template will be added to your HTML. So have a single ng-content and make it project into multiple positions using ng-template and template outlet.
