First is the path in my app routing module Then the home component Next is the app component Lastly the html for button creation

path in the app.routing.module.ts

     {
        path: 'about-us',
        pathMatch: 'full',
        data: { type: '', breadcrumb: '' },
        component: AboutUsComponent,
      },

    

default constructor and ngOnInit in home.component.ts only router variable in constructor

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

    @Component({
      selector: 'app-home',
      templateUrl: './home.component.html',
      styleUrls: ['./home.component.scss'],
    })
    export class HomeComponent implements OnInit {
      constructor(private router : Router) {}

      ngOnInit(): void {}
    }
    

default imports in app.module.ts only

        import { NgModule } from '@angular/core';
        import { BrowserModule } from '@angular/platform-browser';
    
        import { AppRoutingModule } from './app-routing.module';
        import { AppComponent } from './app.component';
        import { HomeComponent } from './home/home.component';
        import { AboutUsComponent } from './about-us/about-us.component';
        import { LoginComponent } from './login/login.component';
        import { LogoutComponent } from './logout/logout.component';
        import { SocialMediaComponent } from './social-media/social-media.component';
        import { LoggedInHomeComponent } from './logged-in-home/logged-in-home.component';
        import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
    
        @NgModule({
          declarations: [
            AppComponent,
            HomeComponent,
            AboutUsComponent,
            LoginComponent,
            LogoutComponent,
            SocialMediaComponent,
            LoggedInHomeComponent,
            PageNotFoundComponent
          ],
          imports: [
            BrowserModule,
            AppRoutingModule
          ],
          providers: [],
          bootstrap: [AppComponent]
        })
        export class AppModule { }
    
        




 **button creation code home.component.html**



        <div >
              <button  type="button">
                <a [routerLink]="'about-us'" [routerLinkActive]="['active']">about-us</a>
              </button>
            </div>
    
    

*My objectives are:

i. Redirect to about us component on click
ii. Open about us component when path is mentioned in url
But neither is working!*

CodePudding user response：

You are missing to import RouterModule from import { RouterModule } from '@angular/router';

CodePudding user response：

Hope you have include RoutingModule in AppRoutingModule. If so try the following code

<a [routerLink]="['about-us']" [routerLinkActive]="['active']">about-us</a>