I have a angular2 component:
import {Component} from '#angular/core';
#Component({
selector: 'sidenav',
templateUrl: './sidenav.html',
styleUrls: ['./sidenav.scss'],
})
export class SidenavComponent {
constructor() {
}
}
I want to include it in another component, which works fine except that the links don't work:
<li><a routerLink="/portfolio">Portfolio</a></li>
I include the component simply with the tag
<sidebar> </sidebar>
what is the missing part. I included the router but it didn't help.
I use the generated jhipster app and want to add a sidenav only for authorized Users. There are many modules and routes defined including each other, but I just don't find the right way.
I include the component simply with the tag
<sidebar> </sidebar>
Isn't it supposed to be <sidenav> </sidenav>?
Maybe u r not using RouterModule correctly?
RouterModule.forRoot(<urRouteDataStructure>)
this is the setting in the imports-array.
I am sharing my code below for reference:-
(I am using bootstrap 3.x)
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { AppComponent } from './app.component';
import { ServerComponent } from './server/server.component';
...
...
import {Routes, RouterModule} from '#angular/router';
const appRoutes: Routes = [
{ path:'server',
component: ServerComponent
}
];
#NgModule({
declarations: [
AppComponent,
ServerComponent,
BasicHighlightDirective,
BetterHighlightDirective,
UnlessDirective
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
RouterModule.forRoot(appRoutes)
],
providers: [LoggingService, AccountsService],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.html
<div class="container">
<div class="row">
<div class="col-xs-12">
<ul class="nav nav-tabs">
<!-- <li role="presentation"> Server Comp </li> -->
<li role="presentation"><a routerLink="/server"> Server Comp </a> </li>
<li role="presentation"><a routerLink="/"> Home Comp</a></li>
</ul>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<router-outlet></router-outlet>
</div>
</div>
</div>
Heres my output screenshot:
Related
I have created a product module as a featured module and shift all child routes of the featured module in the product module from 'app-routing.module.ts'. I haven't added lazy loading yet. But after separating product routes the child routes are not working. The routes are redirecting to the pagenotfound routes.
app-routing.module.ts
const routes:Routes=[
{path:'',redirectTo:'/home',pathMatch:'full'},
{path:'home',component:HomeComponent},
{path:'about',component:AboutComponent},
{path:'product',component:ProductComponent},
{path:'contact',component:ContactComponent},
{path:'buy product',component:ParentComponent},
{path:'view',component:ViewchildComponent},
{path:"**", component:PageNotFoundComponent}
];
#NgModule({
imports:[RouterModule.forRoot(routes,{ enableTracing: false })],
exports:[RouterModule]
})
app.component.html
<nav mat-tab-nav-bar ngClass = "tabs">
<a mat-tab-link routerLink="/home" routerLinkActive="active">Home</a>
<a mat-tab-link routerLink="/about" routerLinkActive="active-link">About US</a>
<a mat-tab-link routerLink="/product" routerLinkActive="active-link">Products</a>
<a mat-tab-link routerLink="/contact" routerLinkActive="active-link">Contact Us</a>
<a mat-tab-link routerLink="/buy product" routerLinkActive="active-link">Buy Product</a>
<a mat-tab-link routerLink="/view" routerLinkActive="active-link">View Child</a>
</nav>
<router-outlet></router-outlet>
product.module.ts
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { LatopComponent } from './latop/latop.component';
import { MobileComponent } from './mobile/mobile.component';
import { ComputerComponent } from './computer/computer.component';
import { MachineComponent } from './machine/machine.component';
import {RouterModule, Routes} from '#angular/router';
import { ProductComponent } from './product.component';
import { MaterialModule } from '../material/material.module';
const proRoute:Routes=[ {path:'product',children:[
{path:'',component:ProductComponent},
{path:'laptop', component:LatopComponent},
{path:'mobile',component:MobileComponent},
{path:'computer',component:ComputerComponent},
{path:'wahing machine',component:MachineComponent}
]}]
#NgModule({
declarations: [
ProductComponent,
LatopComponent,
MobileComponent,
ComputerComponent,
MachineComponent
],
imports: [
CommonModule,
MaterialModule,
RouterModule.forChild(proRoute)
]
})
export class ProductModule { }
product.component.html
<a routerLink='/laptop' mat-raised-button color="primary">Know Laptop</a>
<a routerLink='/mobile' mat-raised-button color="primary">Know Mobile</a>
<a routerLink='/computer' mat-raised-button color="primary">Know Computer</a>
<a routerLink='/wahing machine' mat-raised-button color="primary">Know Washing Machine</a>
It looks like both your AppRoutingModule and your ProductModule are registering a product route. Remove the one from your AppRoutingModule and the route registration should work.
(Also make sure that your ProductModule is imported in your AppModule, remembering that you will have to remove it once you've set up lazy loading.)
https://www.npmjs.com/package/#ngx-translate/core
https://www.npmjs.com/package/#ngx-translate/http-loader
I installed translate package from here and added ngx-translate module with its forRoot , translate service inside component ts (app & header) but it isn't working also
Header component
<header>
<nav class="navbar navbar-expand-lg navbar-light" id="header">
<div class="container">
<a class="navbar-brand" href="#">
<img src=".." alt="logo">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{ exact: true }">
<a [routerLink]="['home']" class="nav-link">Home</a>
</li>
<li class="nav-item dropdown" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{ exact: true }">
<a class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
page 2
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" [routerLink]="['page']">page</a></li>
</ul>
</li>
<li class="nav-item" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{ exact: true }">
<a class="nav-link" [routerLink]="['features']">Features</a>
</li>
<li class="nav-item" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{ exact: true }">
<a class="nav-link reserve-btn" [routerLink]="['reserve']">Reserve</a>
</li>
</ul>
</div>
<button (click)="translate.use('en')">
En
</button>
<button (click)="translate.use('ar')">
Ar
</button>
</div>
</nav>
</header>
Header.component.ts
import { DOCUMENT } from '#angular/common';
import { Component, HostListener, Inject, OnInit } from '#angular/core';
import { TranslateService } from '#ngx-translate/core';
#Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.scss'],
})
export class HeaderComponent implements OnInit {
// lang: string;
constructor(#Inject(DOCUMENT) private document: Document,public translate:TranslateService) {}
ngOnInit(): void {
// this.lang = localStorage.getItem('lang') || 'en';
}
}
app.module.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { GeneralPagesModule } from './general-pages/general-pages.module';
import { RentalPageModule } from './rental-page/rental-page.module';
import { SharedModule } from './shared/shared.module';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { TranslateModule, TranslateLoader } from '#ngx-translate/core';
import { TranslateHttpLoader } from '#ngx-translate/http-loader';
import { HttpClientModule, HttpClient, HTTP_INTERCEPTORS } from '#angular/common/http';
export function HttpLoaderFactory(httpClient: HttpClient) {
return new TranslateHttpLoader(httpClient, './assets/i18n/', '.json');
}
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
SharedModule,
GeneralPagesModule,
RentalPageModule,
BrowserAnimationsModule,
// TranslateModule,
HttpClientModule,
TranslateModule.forRoot({
defaultLanguage:'en',
loader: {
provide: TranslateLoader,
useFactory: createTranslateLoader,
deps: [HttpClient]
}
}),
],
providers: [
// { provide: HTTP_INTERCEPTORS, useClass: HttpInterceptorService, multi: true },
],
bootstrap: [AppComponent]
})
export class AppModule { }
export function createTranslateLoader(http:HttpClient){
return new TranslateHttpLoader(http,'./assets/i18n/','.json')
}
I also tried same steps in app.component.ts
import { Component, Inject } from '#angular/core';
import * as AOS from 'aos';
import { DOCUMENT } from '#angular/common';
import { TranslateService } from '#ngx-translate/core';
import { ActivatedRoute, NavigationEnd, Router } from '#angular/router';
import { filter} from 'rxjs/operators';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
ngOnInit(){
AOS.init({
duration: 1200,
});
}
// Inject document which is safe when used with server-side rendering
constructor(#Inject(DOCUMENT) private document: Document,public translate:TranslateService,
private router: Router, private route: ActivatedRoute) {
}
}
in home.compoent.html
{{"HOME" || translate}}
home.compoent.ts
import { Component, OnInit } from '#angular/core';
import { TranslateService } from '#ngx-translate/core';
#Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
constructor(public translate:TranslateService) { }
ngOnInit(): void {
}
}
The pipe syntax is {{ 'my-translation-key' | translate }} - you have double || in your template, please change and try again.
Alternatively you can inject the translate service and use myTanslation = this.translateService.instant('my-translation-key') if you need to set a variable in your controller.
I Face the same problem and nothing works i tried all the ways it's was issue of angular/core12.0.0. I waste 3 days in it. It was working fine in angular 11 but no one angular 12. So Create custom pipe. :)
import { Pipe, PipeTransform } from '#angular/core';
import { TranslatePipe } from "#ngx-translate/core";
#Pipe({
name: 'myTranslate',
pure: false
})
export class MyTranslate extends TranslatePipe implements PipeTransform {
transform(value: any, args?: any[]): any {
return super.transform(value, args)
}
}
{{ myvalue | myTranslate }
I create a form using Angular ReactiveFormsModule but I got this error message when building the app
ERROR in src/app/security/login/login.component.html:11:13 - error NG8002: Can't bind to 'formGroup' since it isn't a known property of 'form'.
11 <form [formGroup]="loginForm" (ngSubmit)="loginProces()">
for LoginComponent.
I copied the same code in LogoutComponent (for testing) and no error in this component.The two components are in same module -security.
login.component.html:
<div class="wrapper fadeInDown">
<div id="formContent">
<!-- Tabs Titles -->
<!-- Icon -->
<div class="fadeIn first">
<img src="" id="icon" alt="User Icon" />
</div>
<!-- Login Form -->
<form [formGroup]="loginForm" (ngSubmit)="loginProces()">
<input type="text" id="login" class="fadeIn second" name="login" formControlName="username" placeholder="login">
<input type="text" id="password" class="fadeIn third" name="login" formControlName="password" placeholder="password">
<input type="submit" class="fadeIn fourth" value="Log In">
</form>
<!-- Remind Passowrd -->
<div id="formFooter">
<a class="underlineHover" href="#">Forgot Password?</a>
</div>
</div>
</div>
Login.component.ts
import { Component, OnInit } from '#angular/core';
import { FormControl, FormGroup, Validators } from '#angular/forms';
import { LoginService } from '../services/login.service';
#Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
loginForm:FormGroup;
constructor(private authService: LoginService) { }
ngOnInit(): void {
this.initForm();
}
initForm(){
this.loginForm = new FormGroup({
username: new FormControl("",[Validators.required]),
password : new FormControl("",[Validators.required])
});
}
loginProces(){
if(this.loginForm.valid){
this.authService.login(this.loginForm.value).subscribe(result=>{
if(result.success){
console.log(result);
alert(result.message);
}else{
alert(result.message);
}
})
}
}
}
Security.module.ts
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { LoginComponent } from './login/login.component';
import { LogoutComponent } from './logout/logout.component';
import { RegisterComponent } from './register/register.component';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
#NgModule({
declarations: [
LoginComponent,
LogoutComponent,
RegisterComponent
],
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
],
exports:[
]
})
export class SecurityModule { }
What am I doing wrong?
Routing.module
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { LoginComponent } from './security/login/login.component';
const routes: Routes = [
{path:'login', component : LoginComponent }
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
It is possible that the old bundle is still being served. The changes has to be included in the bundle which is being served. Restart the server and check if this problem persists.
ng serve
Cant seem to find what the issue is here as I'm getting no errors from Angular.
I am trying to get a router-outlet inside the primary router-outlet to display a component. Im correctly selecting the router but it is not showing the component i have selected in the second outlet.
app-routing.module.ts
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
const routes: Routes = [
{ path: 'dashboard', loadChildren: () => import('./pages/dashboard/dashboard.module').then(m => m.DashboardModule) }
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
dashboard-routing.module.ts
// ...
const routes: Routes = [
{ path: '', component: DashboardComponent },
{ path: 'forms', component: FormsComponent, outlet: 'sidebar' },
];
#NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class DashboardRoutingModule { }
dashboard.component.html
<app-header></app-header>
<mat-sidenav-container>
<mat-sidenav mode="side" opened>
<mat-nav-list>
<a mat-list-item [routerLink]="[{ outlets: { sidebar: ['forms'] } }]" routerLinkActive="active">Forms</a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<main class="bfa-main">
<router-outlet name="sidebar"></router-outlet>
</main>
</mat-sidenav-content>
</mat-sidenav-container>
<app-footer></app-footer>
The routerlink is correctly selected and displays an active class, as well as a link too:
http://localhost:4200/dashboard/(sidebar:forms)
However there is nothing displayed here and no errors, when i am expecting to see the forms component inside the inner router outlet named sidebar
Does anyone know what I'm missing here?
Thanks
Decided to have the dashboard as a wrapper instead for each of the dashboard components using ng-content
<app-header></app-header>
<mat-sidenav-container>
<mat-sidenav mode="side" opened>
<mat-nav-list>
<a mat-list-item [routerLink]="['forms']" routerLinkActive="active">Forms</a>
<a mat-list-item [routerLink]="['users']" routerLinkActive="active">Users</a>
<a mat-list-item [routerLink]="['posts']" routerLinkActive="active">Posts</a>
<a mat-list-item [routerLink]="['pages']" routerLinkActive="active">Pages</a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<main class="bfa-main">
<ng-content></ng-content>
</main>
</mat-sidenav-content>
</mat-sidenav-container>
<app-footer></app-footer>
What the webpage looks like
So I am trying to make a dropdown but when the dropdown is clicked it displays not overlapping the other input, but at the bottom of the screen.
Here is the relevant chunk of HTML code:
<div class="form-row">
<!-- Grid column -->
<div class="col-md-6">
<mat-form-field>
<mat-label>Toppings</mat-label>
<mat-select [formControl]="toppings" multiple>
<mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
</mat-select>
</mat-form-field>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-6">
<!-- Material input -->
<div class="md-form form-group">
<input mdbInput type="password" class="form-control" id="inputPassword4MD" placeholder="John's Law Firm">
<label for="inputPassword4MD">Firm Name</label>
</div>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
This is the relevant part of the ts file:
toppings = new FormControl();
toppingList: string[] = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'];
constructor() { }
And finally, this is my app.module.ts:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NavbarComponent } from './navbar/navbar.component';
import { AboutComponent } from './about/about.component';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { HomeComponent } from './home/home.component';
import {MatButtonModule,MatIconModule} from '#angular/material';
import { ContactComponent } from './contact/contact.component';
import { ServicesComponent } from './services/services.component';
import { ScheduleComponent } from './schedule/schedule.component';
import {MatInputModule} from '#angular/material/input';
import {FormsModule, ReactiveFormsModule} from '#angular/forms';
import {MatSelectModule} from '#angular/material/select';
#NgModule({
declarations: [
AppComponent,
NavbarComponent,
AboutComponent,
HomeComponent,
ContactComponent,
ServicesComponent,
ScheduleComponent,
ContactComponent,
ServicesComponent,
ScheduleComponent
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
MatButtonModule,
MatIconModule,
MatInputModule,
FormsModule,
ReactiveFormsModule,
MatSelectModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
You'll need an Angular material core theme in your styles.scss file. Just add this in styles.scss:
#import '#angular/material/prebuilt-themes/deeppurple-amber.css';
or whatever other themes you want. You'll need the core theme for components to act right and then you can create a custom theme if you don't like the core default colors.