Category: Angular

Sometimes, we want to add Bootstrap to an angular-cli project.

In this article we’ll look at how to add Bootstrap to an angular-cli project.

How to add Bootstrap to an angular-cli project?

To add Bootstrap to an angular-cli project, we can install the bootstrap package and then add the Bootstrap script and CSS paths into angular.json.

We run

npm install bootstrap

to install bootstrap.

Then we write

//...
{
  "scripts": ["./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"],
  //...
  "styles": [
    "styles.css",
    "./node_modules/bootstrap/dist/css/bootstrap.min.css"
  ]
}
//...

to add the Bootstrap scripts and styles paths into angular.json.

Then we restart ng serve so the changes in angular.json will be picked up.

Conclusion

To add Bootstrap to an angular-cli project, we can install the bootstrap package and then add the Bootstrap script and CSS paths into angular.json.

Sometimes, we want to return data directly from an Observable with Angular.

In this article, we’ll look at how to return data directly from an Observable with Angular.

How to return data directly from an Observable with Angular?

To return data directly from an Observable with Angular, we can return an observable that lets us get the data.

For instance, we write

//...
export class Component implements OnInit, AfterViewInit {
  //...
  getSomething() {
    return this._restService
      .addRequest("object", "method")
      .run()
      .subscribe(
        (res) => {
          // ...
        },
        (err) => {
          console.error(err);
        }
      );
  }
  //...
}

to add the getSomething that returns the observable returned by subscribe.

We get the response data from the subscribe callback and do what we want with it.

Conclusion

To return data directly from an Observable with Angular, we can return an observable that lets us get the data.

Sometimes, we want to set locale in DatePipe in Angular.

In this article, we’ll look at how to set locale in DatePipe in Angular.

How to set locale in DatePipe in Angular?

To set locale in DatePipe in Angular, we can call DatePipe with the current locale.

For instance, we write

import { DatePipe } from "@angular/common";
import { Pipe, PipeTransform } from "@angular/core";
import { TranslateService } from "@ngx-translate/core";

@Pipe({
  name: "localizedDate",
  pure: false,
})
export class LocalizedDatePipe implements PipeTransform {
  constructor(private translateService: TranslateService) {}

  transform(value: any, pattern: string = "mediumDate"): any {
    const datePipe: DatePipe = new DatePipe(this.translateService.currentLang);
    return datePipe.transform(value, pattern);
  }
}

to create the LocalizedDatePipe pipe class that has the transform method.

In it, we create a DatePipe instance with the current language we get from this.translateService.currentLang.

Then we call datePipe.transform with the value and pattern.

Conclusion

To set locale in DatePipe in Angular, we can call DatePipe with the current locale.

Sometimes, we want to use component from another module with Angular.

In this article, we’ll look at how to use component from another module with Angular.

How to use component from another module with Angular?

To use component from another module with Angular, we export the module from the source module.

And then we import the exported module from the destination module.

For instance, we write

@NgModule({
  declarations: [FirstPage, ImportantCopmonent],
  imports: [
    IonicPageModule.forChild(NotImportantPage),
    TranslateModule.forChild(),
  ],
  exports: [FirstPage, ImportantCopmonent],
})
export class FirstPageModule {}

to export FirstPage and ImportantCopmonent by putting it in the exports array in the source module.

Then in the destination module, we write

@NgModule({
  declarations: [SecondPage, Example2ndComponent, Example3rdComponent],
  imports: [
    IonicPageModule.forChild(SecondPage),
    TranslateModule.forChild(),
    FirstPageModule,
  ],
  exports: [SecondPage],
})
export class SecondPageModule {}

to import the FirstPageModule to use use the exported components from the source module.

Conclusion

To use component from another module with Angular, we export the module from the source module.

And then we import the exported module from the destination module.

Sometimes, we want to listen for window resize event with Angular.

In this article, we’ll look at how to listen for window resize event with Angular.

How to listen for window resize event with Angular?

To listen for window resize event with Angular, we can use the HostListener decorator.

For instance, we write

//...
export class Component implements OnInit, AfterViewInit {
  //...
  @HostListener("window:resize", ["$event"])
  onResize(event) {
    event.target.innerWidth;
  }
  //...
}

to listen for window resize event with the onResize method modified by the HostListener decorator.

We call HostListener with the 'window.resize' event and ["$event"] to listen for the window resize event.

And we get the event object from the onResize method’s parameter.

Conclusion

To listen for window resize event with Angular, we can use the HostListener decorator.