configuration-driven template in vue js

1. It's easier to read configuration

Reading code is complicated because you have to figure out what the logic is doing, but configuration is very straightforward to understand.

2. Less logic means less bugs

The config above is just a boring array with some objects. It's pretty simple, so it's unlikely that bugs would come from there.

3. Dynamic components are more flexible

Because we've made this menu component dynamically render out the different menu items, we gain tremendous flexibility.

 

JavaScript Sets New Helper Function Comming soon

const languages = new Set(["JavaScript","TypeScript","HTML","JavaScript"]);

languages.size;

// => 3

languages.add("JavaScript");

languages.add("CSS");

languages.size;

// => 4

You can add more elements to the Set with the add function.

Adding an element that is already in the Set doesn't do anything.

languages.delete("TypeScript");

languages.size;

// => 3

languages.has("JavaScript");

// => true

languages.has("TypeScript");

// => false

languages.forEach(element => console.log(element));

// "JavaScript"

// "HTML"

// "CSS"

Set.prototype.union(other)

A union of sets is a set that contains all the elements present in

either set.

const frontEndLanguages = new Set(["JavaScript", "HTML", "CSS"]);

const backEndLanguages = new Set(["Python", "Java", "JavaScript"]);

const allLanguages = frontEndLanguages.union(backEndLanguages);

// => Set {"JavaScript", "HTML", "CSS", "Python", "Java"}

In this example, all the languages from the first two sets are in

the third set.As with other methods that add elements to the Set,

duplicates are removed.

This is the equivalent of a SQL FULL OUTER JOIN between two tables.

Set.prototype.intersection(other)

An intersection is a set that contains all the elements that are

present within both sets.

const frontEndLanguages = new Set(["JavaScript", "HTML", "CSS"]);

const backEndLanguages = new Set(["Python", "Java", "JavaScript"]);

const frontAndBackEnd = frontEndLanguages.intersection(backEndLanguages);

// => Set {"JavaScript"}

"JavaScript" is the only element present in both the sets here.

An intersection is like an INNER JOIN.

Set.prototype.difference(other)

The difference between the set you are working with and another

set is all the elements present in the first set and not present

in the second set.

const frontEndLanguages = new Set(["JavaScript", "HTML", "CSS"]);

const backEndLanguages = new Set(["Python", "Java", "JavaScript"]);

const onlyFrontEnd = frontEndLanguages.difference(backEndLanguages);

// => Set {"HTML", "CSS"}

const onlyBackEnd = backEndLanguages.difference(frontEndLanguages);

// => Set {"Python", "Java"}

In finding the difference between sets, it matters which set you call

the function on and which is the argument. In the example above,

removing the back-end languages from the front-end languages results in

"JavaScript" being removed and returning "HTML" and "CSS" in the

resultant set. Whereas removing the front-end languages from the

back-end languages still results in "JavaScript" being removed,

and returns "Python" and "Java".

A difference is like performing a LEFT JOIN.

Set.prototype.symmetricDifference(other)

The symmetric difference between two sets is a set that contains all

the elements that are in one of the two sets, but not both.

const frontEndLanguages = new Set(["JavaScript", "HTML", "CSS"]);

const backEndLanguages = new Set(["Python", "Java", "JavaScript"]);

const onlyFrontEnd = frontEndLanguages.symmetricDifference(backEndLanguages);

// => Set {"HTML", "CSS", "Python", "Java"}

const onlyBackEnd = backEndLanguages.symmetricDifference(frontEndLanguages);

// => Set {"Python", "Java", "HTML", "CSS"}

In this case, the elements in the resultant sets are the same,

but note that the order is different.Set order is determined by the order

the elements are added to the set and the set on which the

function is performed will have its elements added first.

A symmetric difference is like a FULL OUTER JOIN excluding any elements

that are in both tables.

New control flow for forLoop and empty in Angular 17

 

import {CommonModule} from '@angular/common';

import {Component} from '@angular/core';

@Component({

selector: 'app-root',

imports: [CommonModule],

template: `

Welcome to Angular-17!

<!-- new control flow for forLoop -->

<!-- new control flow to handle if, else if and else -->

@if(userInfo.isLoggedIn) {

<div>Logged-in</div>

} @else if(userInfo.isAdmin) {

<div>Admin</div>

} @else {

<div>Please Login</div>

}

@for (course of courses; track course) {

<div>{{course | json}}</div>

==================================

} @empty {

<div>No Courses found...</div>

}

`,

standalone: true,

})

export class AppComponent {

isLoading = false;

userInfo = {

isLoggedIn:true,

isAdmin:false

}

courses = [

{ id: 'r18', name: 'React + Redux'},

{ id: 'A17', name: 'Angular + NGRX'}

];

}