Post(s) tagged Angular

Angular detect child component Input() changes using ngOnChanges

The following method is used to detect child component Input() changes in Angular using ngOnChanges()

import { Component, Input, OnChanges, SimpleChanges, ChangeDetectionStrategy } from '@angular/core';
import { User } from './user.model';

export class SelectedUserComponent implements OnChanges {
    @Input() user: User;

    ngOnChanges(changes: SimpleChanges) {
        console.log(changes);
    }
}


Posted on February 19, 2022

How to redirect 301 in Angular Universal

To remove the old data from the search engine you need to add 301 redirects to your old pages.
The below method is used to redirect your old page to a new page using 301 redirects in Angular Universal. This is by default code in server.ts file

// All regular routes use the Universal engine
  server.get('*', (req, res) => {
      res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
  });

All routes come here then the express server(SSR) renders the front-end angular HTML files. So before sending any response to the browser we can send the 301 status code.
You can add some conditions like below

// All regular routes use the Universal engine
  server.get('*', (req, res) => {
    if (index == req.originalUrl)
      res.redirect(301, 'https://www.samprix.com');
    else
      res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
  });


Posted on February 27, 2022

Angular how to change environment variable values after build

Sample environment variables for development & production environment.ts

export const environment = {
    env: 'Dev'
};

environment.prod.ts

export const environment = {
    env: 'Prod'
};

In the above code using the window object like below:
environment.ts

export const environment = {
    env: window['env'] || 'Dev'
};

environment.prod.ts

export const environment = {
    env: window['env'] || 'Prod'
};

Create a .js file in the root directory and add it to index.html file as a script

<script src="./config.js"></script>

In the config.js file, you can update the environment values without rebuilding your application like below:

window['env'] = 'Uat';


Posted on March 24, 2022
Sponsors