Angular pipe to replace characters in a string

Generate a new pipe using the Angular CLI

ng g pipe pipes/replace

Code inside the new pipe (pipes/replace.pipe.ts)

...
transform(input: string, from: string, to: string): string {
   const regEx = new RegExp(from, 'g');
   return input.replace(regEx, to);
}

Usage

// page.component.html
// replaces underscores with spaces
...
<span>{{ myString | replace:'_':' '}}</span>

Mock a non-singleton Angular service in a component unit test

describe('MyComponent', () => {
  let mockService: jasmine.SpyObj<MyService>;

  beforeEach(async () => {
    mockService = jasmine.createSpyObj<MyService>(['download']);

    await TestBed.configureTestingModule({
    ...
    }).overrideComponent(MyComponent, {
      set: {
        providers: [
          { provide: MyService, useValue: mockService }]
      }
  }).compileComponents();

  beforeEach(() => {
    ...
  });

  it('should create', () => {
    ...
  });
});

Add theme switching to Angular Material

// styles.scss
$dark-theme: mat.define-dark-theme(
    vars.$primaryPalette, 
    vars.$accentPalette, 
    vars.$warnPalette);

$light-theme: mat.define-light-theme(
    vars.$primaryPalette,
    vars.$accentPalette,
    vars.$warnPalette);

.light-theme {
  @include mat.all-component-themes($light-theme);
}

.dark-theme {
  @include mat.all-component-themes($dark-theme);
}

// app.component.ts
constructor(
  private _settingsService: SettingsService,
   @Inject(DOCUMENT) private _document: Document) { }

  ngOnInit(): void {
    this._settingsService.theme$.subscribe(theme => {

      if (theme === Themes.DARK) {
        this._setDarkTheme();
      } else {
        this._setLightTheme();
      }
    });
  }

  private _setDarkTheme(): void {
    this._document.documentElement.classList.add(Themes.DARK);
    this._document.documentElement.classList.remove(Themes.LIGHT);
  }

  private _setLightTheme(): void {
    this._document.documentElement.classList.add(Themes.LIGHT);
    this._document.documentElement.classList.remove(Themes.DARK);
  }

This is just a summary, so some of the more trivial parts are omitted.

ref: https://octoperf.com/blog/2021/01/08/angular-material-multiple-themes

HTTPS redirect on web server

create .htaccess file at public_html root

# WHERE domain = the domain
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{SERVER_PORT} 80
RewriteCond %{HTTP_HOST} ^(www\.)?domain\.com
RewriteRule ^(.*)$ https://www.domain.com [R,L]
RewriteBase /
</IfModule>

Angular 404 or 500 on refresh

create .htaccess file at public_html root

# WHERE directory = the sub-directory AND domain = the domain
RewriteRule ^directory https://www.domain.com [L,R=301]

Pass and retrieve data in Mat-Dialog

// Pass data to Dialog
constructor(
    private _dialog: MatDialog
) {}

someFunction(whatever) {
    let dialogConfig = new MatDialogConfig();

    
    dialogConfig.data = {
      whatever: whatever,
    };

    this._dialog.open(
      MyDialog,
      dialogConfig
    );
}


// Retrieve within the dialog
constructor(
    @Inject(MAT_DIALOG_DATA) private _inputParams: any
) {}

ngOnInit(): void {
    this.whatever = this._inputParams.whatever;
}

Update global npm packages

// Updating all globally-installed packages
npm update -g
// or 
npm install npm@latest -g

// Determining which global packages need updating
npm outdated -g --depth=0

// Updating a single global package
npm update -g <package_name>

ref

nginx error with Angular routing

404 Not Found

nginx/1.14.0 (Ubuntu)

Solution:

/etc/nginx/sites-available/yoursite

#change this line:
try_files $uri $uri/ =404;
#to this:
try_files $uri $uri/ /index.html;
#then restart nginx
sudo systemctl restart nginx