V
V
Victoria Kabishova2020-02-22 22:05:03
Angular
Victoria Kabishova, 2020-02-22 22:05:03

How to properly write paths in angular routing to angular version 8.2.14?

Here is what I have:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { ReactiveFormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { MainComponent } from './Component/fb/Main';
import { UsersComponent } from './Component/fb/Users';
import { Users1Component } from './Component/fb/Users1';
import { CompanyComponent } from './Component/fb/Company';
import { Company1Component } from './Component/fb/Company1';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';


@NgModule({
  imports: [
      BrowserModule,
      NgbModule,
      ReactiveFormsModule,
      RouterModule.forRoot([
        { path: '', component: MainComponent },

      ]),
  ],
  declarations: [
    AppComponent, 
    MainComponent,
    UsersComponent,
    Users1Component,
    CompanyComponent,
    Company1Component,
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

I got stuck on the paths. I use https://angular.io/start/routing#routing.

Here are the Components I have:
import { Component } from '@angular/core';
import {FormControl, Validators} from '@angular/forms';

@Component({
  selector: 'app-company1',
  templateUrl: './Company1.html',
  styleUrls: ['./Company1.css']
})

export class Company1Component {
  images = [944, 1011, 984].map((n) => `https://picsum.photos/id/${n}/900/500`);

  ctrl = new FormControl(null, Validators.required);

  toggle() {
    if (this.ctrl.disabled) {
      this.ctrl.enable();
    } else {
      this.ctrl.disable();
    }
  }
}


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

@Component({
  selector: 'app-users',
  templateUrl: './Users.html',
  styleUrls: ['./Users.css']
})


export class UsersComponent {}


import { Component } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-users1',
  templateUrl: './Users1.html',
  styleUrls: ['./Users1.css']
})

export class Users1Component {
  profileForm = new FormGroup({
    firstName: new FormControl(''),
    lastName: new FormControl(''),
    address: new FormGroup({
      street: new FormControl(''),
      city: new FormControl(''),
      state: new FormControl(''),
      zip: new FormControl('')
    })
  });
}


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

@Component({
  selector: 'app-users1',
  templateUrl: './Company.html',
  styleUrls: ['./Company.css']
})

export class CompanyComponent {
}


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

@Component({
    selector: 'app-main',
    templateUrl: './Main.html',
    styleUrls: ['./Main.css'],
    encapsulation: ViewEncapsulation.None,
  styles: [`
    .dark-modal .modal-content {
      background-color: #292b2c;
      color: white;
    }
    .dark-modal .close {
      color: white;
    }
    .light-blue-backdrop {
      background-color: #5cb3fd;
    }
  `]
  })

export class MainComponent {

}

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question