Create a service to Generate a Random Code and Consume It

Service Creation

Component Creation

Service. ts

import {

    Injectable

} from '@angular/core';

@Injectable()

export class Myservice1 {

   

    public GenerateCaptcha()

    {

        let a=Math.random()*10;

        let b=Math.random()*10;

        let c=Math.random()*10;

        let d=Math.random()*10;

        let e=Math.random()*10;

        let code=Math.round(a) + '' +

        Math.round(b) +  '' +

        Math.round(c) +  '' +

        Math.round(d) +  '' +  Math.round(e)

        return code;

    }

}

 

Component.ts

import { Component, OnInit } from '@angular/core';

import { Myservice1 } from './myservice1';

@Component({

  selector: 'app-observabledemo1',

  templateUrl: './observabledemo1.component.html',

  styleUrls: ['./observabledemo1.component.css']

})

export class Observabledemo1Component implements OnInit {

public code: any;

constructor(private captcha: Myservice1)

{

}

  ngOnInit(): void {

    this.NewCode();

  }

public NewCode()

{

  this.code=this.captcha.GenerateCaptcha();

}

public RefreshCode()

{

  this.NewCode();

}

}

appModule.ts

.html

<table>

    <tr>

        <td>

            User Name

        </td>

        <td>

            <input type="text" name="username">

        </td>

    </tr>

    <tr>

        <td>

            Password

        </td>

        <td>

            <input type="password" name="password">

        </td>

    </tr>

    <tr>

    <td>

        captcha

    </td>

    <td>

        {{code}}

    </td>

    </tr>

</table>

<button (click)="RefreshCode()">RefreshCode</button>

Output