Hello to all, welcome again on therichpost.com. In this post, I will tell you, How to make array push or empty in Angular 9 when getting data from API?

Post Working:

In this post, I am showing with video example that, how I am pushing the data to an array and also make that array empty during getting updated data.

Here is working code and please use or check carefully:

1. Here is my app.component.ts file and below code will push api data to an array:

...
data = []; //Declare array variable

  constructor(private http: HttpClient) {
    this.http.get('http://localhost/mypage.php').subscribe(data => {
  
    this.data.push(data); // Pushing data to declared array variable
    console.log(this.data);
   
    
    }, error => console.error(error));
  
  }
...

 

2. Here is my app.component.ts file and below code will make array variable empty:

refresh()
  {
   this.data.length=0; //Make array variable empty
   this.http.get('http://localhost/mypage.php').subscribe(data => {
   this.data.push(data); //Push updated data
   console.log(this.data);
   
    
    }, error => console.error(error));
  }

 

if you have any query then please do comment below.

Jassa

Thank you

Hello to all, in this post, I will tell you, How to store global variables in Angular 9?

Localstorage is use to store data with no expiration date. We will manually destroy it.

In this post, I am creating and deleting the local storage data and it is easy to use.

Here is the working Image just for testing:

In above picture, there are two buttons, Get item and Delete item:

Get Item is set the value for variable.

Delete Item is remove the value from variable.

Here is the working and tested code, you need to follow:

1. First, you need to write below code into yours app.component.ts file:

Here,  we will set the localstorage data and also delete it:

import {Component} from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  get dataV(): any {
    return localStorage.getItem('blog'); //Get Global Variable Value
  }

  delete()
  {

    localStorage.removeItem('blog'); //Delete Global Variable
  }
  get()
  {

    localStorage.setItem('blog', 'therichpost.com'); //Set Global Variable
  }
}

 

2. Second, you need write below code into your app.component.html file:

In this file, we will make the buttons and get the localstorage data:

<div class="jumbotron text-center">
  <h1>Angular LocalStorage
</h1>
</div>
<div class="container">
<button (click)="get()">Get Item</button><br><br>
<button (click)="delete()">Delete Item</button>
<h1>{{ dataV }}</h1>
</div>

 

If you have any query related to this post, then do comment below or ask questions.

Jassa

Thanks

Hello to all, welcome again on therichpost.com. In this post, I will tell you, How to login into Angular 9 application with Facebook?

Here are the complete commands and code snippet and please follow carefully:

1. Here are the basics commands to set angular 9 your system:

npm install -g @angular/cli 

ng new angularbootstrap //Create new Angular Project

$ cd angularbootstrap // Go inside the Angular Project Folder

ng serve --open // Run and Open the Angular Project

http://localhost:4200/ // Working Angular Project Url

 

2. Here is the command to install bootstrap 4 into your angular 9 applicatiopn:

npm install --save bootstrap

3. Here is the command to install Angular 9 Social login module:

npm install --save angularx-social-login

 

4. Here are the bootstrap 4 css and js path, you need to include into your angular.json file:

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

 

5. Here is the html code, you need to add into your src\app\app.component.html file:

div class="container">
  <div class="row">
    <div class="col-sm-12">
      <h4>About Me</h4>
     <h3>{{user.name}}</h3>
      <h5>Photo of me:</h5>
      <div class="fakeimg"><img src="{{user.photoUrl}}"></div>
     <button (click)="signInWithFB()" class="btn btn-primary">Login Facebook</button>
   </div>
  </div>
</div>

 

 

6. Here is the code, you need to add into your app.module.ts file:

...

import { SocialLoginModule, AuthServiceConfig } from "angularx-social-login";
import { FacebookLoginProvider } from "angularx-social-login";
let config = new AuthServiceConfig([
  
  {
    id: FacebookLoginProvider.PROVIDER_ID,
    provider: new FacebookLoginProvider("YourFacebookAppID")
  }
]);

export function provideConfig() {
  return config;
}
...

...
 providers: [
      {
      provide: AuthServiceConfig,
      useFactory: provideConfig
      } 
  ],
...

 

 

6. Here is the code, you need to add into your app.component.ts file:

import { Component } from '@angular/core';
import { AuthService } from "angularx-social-login";
import { FacebookLoginProvider} from "angularx-social-login";
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angularbootstrap';
  private user: any;
  private loggedIn: boolean;
  constructor(private authService: AuthService) { }
  //Logion
  signInWithFB(): void {
    this.authService.signIn(FacebookLoginProvider.PROVIDER_ID);
  
  } 
  // Logout Function
  signOut(): void {
    this.authService.signOut();
  }
  ngOnInit() {
    //Get User Data
    this.authService.authState.subscribe((user) => {
      this.user = user;
    
      this.loggedIn = (user != null);
    });
  }
}

 

This is it and please run ng serve command and check the output. If you have any kind of query then please do comment below.

Jassa

Thank you

Hello to all, welcome to therichpost.com. In this post, I will tell you, How to make title dynamic in Angular 9?

Here are the basics commands and code and please follow carefully:

1. Here are the basics commands to install angular 9 on your system:

npm install -g @angular/cli 

ng new angularpopup //Create new Angular Project

cd angularpopup // Go inside the Angular Project Folder

ng serve --open // Run and Open the Angular Project

http://localhost:4200/ // Working Angular Project Url

2. Here is the code for app.component.ts file:

import {Title} from "@angular/platform-browser";
...
export class AppComponent {
...

constructor(private titleService:Title) {
   this.titleService.setTitle("Add Product");
  }

...

}

This is it and if you have any kind of query then please comment below.

Jassa

Thank you

Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular 7,8,9 useful 5 hacks.

1. Limit string length in angular:

 <p class="card-text">{{item.description | slice:0:100}}...</p>
// This will show first 100 words

2. String replace in Angular:

<p class="card-text">{{item.title.replace(' ','-')}}</p>
// This will replace empty space with -

3. String Lowercase in Angular:

<p class="card-text">{{item.description | lowercase}}</p>

4. Date Format in Angular:

<div class="date">{{item.dateadded | date:'dd'}}<br>{{item.dateadded | date:'MMM'}}</div>
// This will show the date in format what you want

5. Looping in Angular:

 <ul>
   <li *ngFor="let tag of tags; let i = index" [attr.data-index]="i">
       <a href="#">{{tag}}</a>
   </li>
 </ul>
// tags data is coming from angular component and number the tags data will generate same number of li

 

I will share more in angular and if you have any query then please let me know.

Jassa

Thank you