title: Login using API in Ionic 6
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>## login.page.ts ##
  
  import { Component, OnInit } from '@angular/core';
  import { AuthService } from 'src/services/auth/auth.service';
  import { NavController } from '@ionic/angular';
  import { AlertService } from 'src/services/alert/alert.service';
  import { NgForm } from '@angular/forms';
  
  @Component({
    selector: 'app-login',
    templateUrl: './login.page.html',
    styleUrls: ['./login.page.scss']
  })
  export class LoginPage implements OnInit {
  
    constructor(
      private authService: AuthService,
      private navCtrl: NavController,
      private alertService: AlertService
    ) { }
  
    ngOnInit() {
  
    }
  
    onLogin(form: NgForm) {
      this.authService.login(form.value.username, form.value.password).subscribe(
        () =&gt; {
          this.alertService.presentToast("Logged In");
          this.navCtrl.navigateRoot('/welcome');
        },
        error =&gt; {
          console.log(error);
        },
        () =&gt; {
          this.alertService.presentToast("Failed");
          this.navCtrl.navigateRoot('/login');
        }
      );
    }
  
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>## login.page.scss ##
  
  ion-content.background{
      --background: url(../../assets/img/staffandtruck.jpg) 0 0/100% 100% no-repeat;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>## login.page.html ##
  
  &lt;ion-content padding class="background"&gt;
  
    &lt;ion-card&gt;
          &lt;img src="assets/img/logo2.png"/&gt;
      &lt;/ion-card&gt;
  
      &lt;ion-card&gt;
        &lt;ion-card-content&gt;
          &lt;form #form="ngForm" (ngSubmit)="onLogin(form)"&gt;
  
            &lt;ion-item&gt;
              &lt;ion-icon slot="start" name="person-circle"&gt;&lt;/ion-icon&gt;
                &lt;ion-label position="floating"&gt;Staff ID&lt;/ion-label&gt;
              &lt;ion-input  type="email" name="username" ngModel required&gt;&lt;/ion-input&gt;
            &lt;/ion-item&gt;
  
            &lt;ion-item&gt;
              &lt;ion-icon slot="start" name="key"&gt;&lt;/ion-icon&gt;
                &lt;ion-label position="floating"&gt;Password&lt;/ion-label&gt;
              &lt;ion-input type="password" name="password" ngModel required&gt;&lt;/ion-input&gt;
            &lt;/ion-item&gt;
            
              &lt;ion-card-content&gt;
                &lt;ion-button expand="block" color="primary" type="submit"&gt;Log in&lt;/ion-button&gt;
              &lt;/ion-card-content&gt;
            
          &lt;/form&gt;
        &lt;/ion-card-content&gt;
      &lt;/ion-card&gt;
  
  &lt;/ion-content&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>i am new here and beginner in Ionic Framework. Is there anyone can help me and teach me on how to create a login using API that call username and password without create a <strong>Model</strong> for <strong>User</strong>? I don't know how to startup and implement this API. This is my environment setup for Ionic.
  <a href="https://i.stack.imgur.com/FSoXe.png" rel="nofollow noreferrer">My environment setup for Ionic</a>. This is for environment service that calling API for login <a href="https://i.stack.imgur.com/7gFLA.png" rel="nofollow noreferrer">EnvService.ts</a>. This is for auth service <a href="https://i.stack.imgur.com/hmYea.png" rel="nofollow noreferrer">AuthService.ts</a>. But, that all not functioning as I wish.</p>