To programmatically set an Angular control as invalid, you can use the setErrors() method of the AbstractControl class. This method allows you to set an error object on the control that will indicate that it is invalid.

Here is an example of how you can use setErrors() to set a control as invalid.

In this example, the setControlInvalid() method is used to set the name control as invalid by calling the setErrors() method on it and passing in an error object with the key invalid set to true. This will cause the control to be marked as invalid and will display the appropriate validation message if a validation message is defined for the error key.

To dynamically add a FormControl to an Angular form, you can follow these steps:

1. Import the FormBuilder class from the @angular/forms module at the top of your component
2. Inject the FormBuilder service in your component's constructor
3. Create a new FormGroup using the FormBuilder
4. To dynamically add a FormControl, you can use the addControl method on the FormGroup
   
   This will add a new FormControl with the name "myControlName" to the FormGroup. The second parameter to the FormControl constructor is the initial value of the control.

You can add as many controls as you need, and you can also remove controls using the removeControl method on the FormGroup.

• import ActivatedRoute from ‘@angular/router’.
• Inject ActivatedRoute class in constructor.
• Access the queryParams property of the ActivatedRoute class. This property returns an observable of the query parameters that are available in the current URL route.

We'll look at an example to help 

Check out the following link.

http://localhost:4200/posts?website=codeehut.com

Now, you can get to the URL parameters in the component by subscribing to ActivatedRoute. queryParams observable

Changing the default 4200 port is an easy task in your Angular project. Using the --port option when you run ng serve passing as parameter the preferred port, you can access your project on another port from the default.

You can also define the command in your package.json file to avoid adding --port option every time you run ng serve

Pass more than one parameters to an Angular pipe.

You can define more params than one in an Angular pipe separating them with colons.

Using the destructor …args: any[] in the pipe class you get all the passed arguments in an array.

This loader has to be defined in your top level component in order to be global. 

As a result open app.component.html and move the <router-outlet></router-outlet> inside a container element (ex. <main>).  This element will be responsible for handling the loading effect, based on the this.loading:boolean value.

The loading boolean value will be handled by the  this.router.events subscription which listens all router events.

The events that are important for the loader is the NavigationStart and NavigationEnd. We must also add the NavigationCancel and NavigationError in case that something will not work as it should.