DEV Community: Ambroise BAZIE

What is NgComponentOutlet in Angular?

Ambroise BAZIE — Thu, 07 Sep 2023 13:09:53 +0000

NgComponentOutlet is used to instantiate a component type and insert its Host View into the current View.

Things to know

You can control the component creation process by using the attributes below:

ngComponentOutletInputs: Optional component inputs object, which will be bind to the component.
ngComponentOutletInjector: Optional custon Inject that will be used as parent for the component. Defaults to the injector of the current view container

Example

<!-- dynamic.component.html -->
<ng-container *ngComponentOutlet="displayedComponent"></ng-container>

<!-- dynamic.component.ts -->

@Component({
// ....
})
export class DynamicComponent implements OnInit {

  displayedComponent = EmptyComponent;

  showDetail = false;

  ngOnInit(): void {
      if (this.showDetail) {
        this.displayedComponent = ProductDetailComponent
      } else {
        this.displayedComponent = EmptyComponent
      }
  }
}

For more details visit the official documentation on Angular.io

How to setup Tailwindcss in Angular project

Ambroise BAZIE — Sat, 19 Mar 2022 11:33:28 +0000

The purpose of this article is to enhance the combination of Angular and Tailwindcss.

Prerequisites

Angular

Tailwindcss

A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup. according to the official definition visit tailwindcss official website to know more.

Installation

Inside your existing angular project or new one run the following commands in the project terminal:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Inside `tailwind.config.js`

Add the paths of your templates files

module.exports = {
// ...
  content: [
    "./src/**/*.{html,ts}",
  ],
  // ...
}

Add tailwind to `style.scss`

@tailwind base;
@tailwind components;
@tailwind utilities;

Use tailwind inside `app.component.html`

<div class="text-2xl">Angular and Tailwindss</div>

Run server

ng serve

References

Tailwindcss

Mongoose populate: How to query multi-level document

Ambroise BAZIE — Wed, 02 Jun 2021 16:58:59 +0000

Sometimes you want to populate more than one level deep a schema using mongoose. i will share with you today how i use pure mongoose populate method to access more than one level deep data relation.

Suppose you have a User model that has many Posts and each post has Category.

Here we are going to retrieve a user with all posts that are not deleted with the category name and description populated.

Models

import * as mongoose from 'mongoose';
import { Schema } from 'mongoose';

// Category schema
export const categorySchema = new Schema({
    categoryName: {type: String, unique: true},
    description: {type: String},
    isDeleted: {type: Boolean, default: false}
}, {timestamps: true});

// Post schema
const postSchema = new Schema({
    title: { type: String },
    description: { type: String },
    category: { type: Schema.Types.ObjectId, ref: "Category"},
    isDeleted: { type: Boolean, default: false }
});

// User schema
const userSchema = new Schema({
    username: { type: String, unique: true },
    email: { type: String, unique: true },
    posts: [
     { type: Schema.Types.ObjectId, ref: "Post" }
    ]
});

export const Category = mongoose.model('Category', categorySchema);
export const Post = mongoose.model('Post', postSchema);
export const User = mongoose.model('User', userSchema);

Query

// Query to get all posts with the category 
const userWithPosts = await User.findById(id).populate({
   path: 'posts',
   model: Post,
   match: { isDeleted: false },
   populate: {
      path: 'category',
      model: Category,
      select: "categoryName description"
   }
}).exec();

Thanks

Everything to know about for...in and for...of

Ambroise BAZIE — Mon, 02 Mar 2020 22:14:10 +0000

for...of vs for...in

Everything you should know before using for...in or for...of

for...of

for...of statement creates a loop iterating over
iterable objects, including: build-in String, Array,array-like objects (e.g: arguments or NodeList ), TypedArray, Set, Map, and user-defined iterables. It invokes a custom iterable hook for the statements to be executed for the value of each distinct property of the object.

Iterate over `Array`

let l = [20, 30, 40];
// use let 
for (let item of l) {
    item += 1
    console.log(item)
}
// 21
// 31
// 41

// use const 
for (const item of l) {
    console.log(item)
}
// 20
// 30
// 40

Iterate over `NodeList`

Iterate through li with class .list and adding .active

let lis = document.querySelectorAll('ul > li.list');

for (let li of lis){ 
li.classList.add('active');
}

Iterate over `String`

let str = 'hello';

for (let char of str) {
    console.log(char)
}
// h
// e
// l
// l
// o

Iterate over `Set` and `Map`

// Set
let list = [1, 2, 2, 3, 4];
let set = new Set(list);

for (let i of set) {
    console.log(i);
}
// 1
// 2
// 3
// 4

// Map
let map = new Map([['milk', 10], ['potatoes', 20]]);

for (let [key, value] of map) {
    console.log(key, value) 
}
// milk 10
//  potatoes 20

for...in

for...in can be applied on iterable, object and return the index or key of each element.

let arr = [1, 3, 4];

let obj = { milk: 10, grappes: 23 };

// work well
for (let key in arr) {
  console.log(key);
}
// Output:
// 0
// 1
// 2

// will return keys
for (let key in obj) {
  console.log(key);
}
// Output:
// milk
// grappes