Why does adding a selector tag cause a web app to freeze?

Question

I set up a new project with the mean.io generator. The TypeScript file for the login component has "app-login" for the selector, but the HTML file for the login component does not include the "app-login" HTML tag anywhere.

In previous projects, I never failed to put the selector tag in the HTML file, so I put the entire generated contents of the file login.component.html into the "app-login" start and end HTML tags.

Now the app builds just fine, but it freezes when I try to navigate to the login view. Can anyone tell me why this is?

login.component.html:

<app-login>
<mat-card class="example-card">
  <mat-card-header>
    <mat-card-title>Login</mat-card-title>
  </mat-card-header>
  <mat-card-content>
    <form class="example-form">
      <table cellspacing="0">
        <tr>
          <td>
            <mat-form-field>
              <input matInput placeholder="Email" [(ngModel)]="email" name="email" required>
            </mat-form-field>
          </td>
        </tr>
        <tr>
          <td>
            <mat-form-field>
              <input matInput placeholder="Password" [(ngModel)]="password" type="password" name="password" required>
            </mat-form-field>
          </td>
        </tr>
      </table>
    </form>
  </mat-card-content>
  <mat-card-actions>
    <button mat-raised-button (click)="login()" color="primary">Login</button>
    <span>Don't have an account ? <a [routerLink]="['/auth/register']" >register</a> here</span>
  </mat-card-actions>
</mat-card>
</app-login>

login.component.ts:

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

import {AuthService} from '../auth.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['../auth.component.scss']
})
export class LoginComponent implements OnInit {

  constructor(private authService: AuthService, private router: Router) { }

  email: string;
  password: string;

  ngOnInit() {
  }

  login(): void {
    this.authService.login(this.email, this.password)
    .subscribe(data => {
      this.router.navigate(['']);
    })
  }

}

Answer 1

On Angular a selector is used to call a component on another component.

Example

Home.component.html

<app-login><app-login/>

login.component.html

Hello world this is login!

Your result when home component loads will be

Hello world this is login

On your approach

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['../auth.component.scss']
})

login component will load what ever is on your templateUrl, meaning it will load login.component.html. Since you added the selector inside you are stuck on an infinite loop where login loads login and so on and on.

Just remove the selector from your login html and remember, the selector is used to call that component on a different component.