I'm creating my first application in Angular 4 and I imported my AppRoutingModule into app.module.ts, as far as I know, by importing the module into this app.module it becomes "visible" to the rest of the application. From this principle, I did not declare in a module below (retaguarda.module), but the component retaguarda.component has in its html the <router-outlet> </ router-outlet> tag, the error shown asks to import the AppRoutingModule Inside rearModule, however, as stated above, being declared in the app.module, should not be visible to the rear. Module as well?
Declaring straight in the retaguardamodule the error disappears, however the navigation is with bug, so I believe that the problem is in more than one place. Can you help me with that, too?
app.module.ts:
...
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
AppRoutingModule,
RetaguardaModule,
LoginModule
],
providers: [
LoginGuard,
LoginService,
Ambiente
],
bootstrap: [AppComponent]
})
export class AppModule { }
retaguarda.module.ts:
...
#NgModule({
imports: [
CommonModule,
NavbarModule,
SidenavModule,
CadastrosModule,
MovimentacoesModule,
AdministracaoModule,
RelatoriosModule,
ConfiguracoesModule,
DashboardModule
],
declarations: [
RetaguardaComponent
],
exports: [
RetaguardaComponent
]
})
export class RetaguardaModule { }
app.component.html:
<app-retaguarda></app-retaguarda>
retaguarda.component.html:
<header>
<app-navbar *ngIf="ambiente.usuarioLogado"></app-navbar>
<app-sidenav ></app-sidenav>
</header>
<div class="container">
<router-outlet></router-outlet>
</div>
You need to use .forRoot() and .forChild() here.
Start with AppRoutingModule.forRoot() and having a single route give you your RetaguardaComponent. Next, have the RetaguardaModule use the .forChild() notation to route within your module.
If RetaguardaComponent doesn't have any child routes and isn't a route itself (i.e. it always displays), then consider putting it into a CoreModule and having the AppComponent handle the routing.
Read more from this page to get a better grasp on how to set up routing:
https://angular.io/docs/ts/latest/guide/router.html#!#why-routing-module
Related
I tried to start a new project on angular 10 today, but i got this problem whenever a try to use a ngModel inside of anything, and i know that question was already asked and resolved several times here on stackoverflow, but i already imported FormsModule and even ReactivFormsModule, but the error keeps happening
html
<div class="background">
<h4>Character Selector</h4>
<label>Character</label>
<select [(ngModel)]="selectedChar" name="char-selector">
<option *ngFor="let char of characterList" [value]="char.value">
{{char.label}}
</option>
</select>
<p> Selected Character: {{selectedChar}} </p>
</div>
modules.ts
#NgModule({
declarations: [],
imports: [BrowserModule, FormsModule, CommonModule, ReactiveFormsModule],
providers: [],
bootstrap: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {}
StackBlitz Sample
Edit: Declaring AppComponent solved the problem
#NgModule({
declarations: [AppComponent],
imports: [BrowserModule, FormsModule, CommonModule, ReactiveFormsModule],
providers: [],
bootstrap: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {}
Try this :
Here I am doing a two way binding with a <select> element and a <p> element, using the ngModel directive.
<select [(ngModel)]="selectedChar">
<option value="">-- Select a Value --</option>
<option *ngFor="let char of characterList" [(ngValue)]="char.value">{{char.label}}</option>
</select>
<p>Selected Character: {{selectedChar}}</p>
I am attempting to display a list of the names of users of my application. Included
in the display is supposed to be an icon button which will perform some action
when pressed. I am using Angular Material components.
I believe I have all the important imports to the module. The code below shows
the material design components I imported:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { MatListModule } from '#angular/material/list';
import { MatToolbarModule,
MatCardModule,
} from '#angular/material';
import { routeCmp } from './app.router';
import { NewuserModule } from './newuser/newuser.module';
import {MatIconModule} from '#angular/material';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { MainComponent } from './main/main.component';
#NgModule({
declarations: [
AppComponent,
MainComponent,
],
imports: [
BrowserModule,
MatToolbarModule,
MatCardModule,
MatListModule,
MatIconModule,
BrowserAnimationsModule
],
// the rest of the code omitted for brevity
})
export class AppModule { }
Based on examples I've seen on the Internet, I have the following HTML for my
display:
<mat-nav-list>
<mat-list-item *ngFor="let names of userNames">
<div matLine>{{ names }}</div>
<button mat-icon-button>
<mat-icon>info</mat-icon>
</button>
</mat-list-item>
</mat-nav-list>
Note that userNames is (currently) just an array of strings.
My code is similar to the code shown below, which is taken from an example at
https://stackblitz.com/edit/list-examples?file=app%2Fnav-list%2Fnav-list.component.html
<h5>Complex Nav List</h5>
<mat-nav-list>
<mat-list-item *ngFor="let link of links">
<a matLine href="javascript:void(0)">{{ link }}</a>
<button mat-icon-button>
<mat-icon>info</mat-icon>
</button>
</mat-list-item>
</mat-nav-list>
The display from the example is shown in the picture below:
Unfortunately, what I am seeing instead is a button and text:
Obviously, I am missing something. There is something not described in the example that
makes it work. I did try recreating the example code in my own development setup, based
on what I downloaded from the site. The example code failed to properly display the
icon in my environment.
Can someone tell me what I am missing here? How can I get my list to properly display
the icons in my list?
You need to import Material Icons fonts into your project.
In index.html, add the following code.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
Since you are using mat-icon-button, you also need to import MatButtonModule into your AppModule imports.
You appear to be missing the MatButtonModule in your AppModule's imports.
I have already written an application using Angular 6 and I am adding Angular material into it.
Reactive forms approach is used in existing application
I have a login module which has below declaration.
#NgModule({
imports: [
CommonModule,
RouterModule.forChild([
{path:'login',component:LoginComponent}
]),
ReactiveFormsModule,
HttpClientModule,
MatFormFieldModule,
MatInputModule
],
declarations: [LoginComponent]
})
export class LoginModule { }
The Login component has below template - login.component.html
<form>
<mat-form-field>
<input matInput placeholder="UserName">
</mat-form-field>
</form>
The AppModule imports the LoginModule into it.
I am getting below console error when login.html is rendered
compiler.js:1016 Uncaught Error: Template parse errors:
No provider for ControlContainer ("<section>
[ERROR ->]<form>
<mat-form-field>
<input matInput placeholder="UserName">
This error is resolved when I add FormsModule in LoginModule as below
#NgModule({
imports: [
CommonModule,
RouterModule.forChild([
{path:'login',component:LoginComponent}
]),
FormsModule, //forms module added
ReactiveFormsModule,
HttpClientModule,
MatFormFieldModule,
MatInputModule
],
declarations: [LoginComponent]
})
export class LoginModule { }
Does FormsModule needed to be added for Angular material forms to work ?
But what if we are using reactive forms as the case with my sample application ?
I have created a simple directive that works in an angular demo app according to the guide here.
The appHighlight directive works in Angular, but does nothing when applied in a new blank Ionic-v4 app.
Here are the steps I took to create this ionic project:
ionic start directiveTest blank --type=angular
ionic generate directive Highlight
imported ElementRef from ‘#angular/core’ and injected into
HighlightDirective constructor as shown below.
set ElementRef.nativeElement.style.backgroundColor = ‘yellow’ inside
the directive constructor
checked to make sure HighlightDirective was declared in
app.module.ts added ‘appHighlight’ to tag in home.page.html
Is this expected to work as shown, or am I missing something? Thanks!
highlight.directive.ts:
import { Directive, ElementRef } from '#angular/core';
#Directive({
selector: '[appHighlight]'
})
export class HighlightDirective {
constructor(el: ElementRef) {
el.nativeElement.style.backgroundColor = 'yellow';
}
}
app.module.ts:
#NgModule({
declarations: [AppComponent, HighlightDirective],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}
home.page.html:
<ion-content padding>
The world is your oyster.
<p appHighlight> test </p>
</ion-content>
I'm trying to test custom validations in Angular 4 and am using the 'appForbiddenName' validation provided by angular here.
Here is my code set up:
<div class='col-xs-12 col-sm-5'>
<div class="form-group">
<label class="control-label" for="firstName">First Name</label>
<input class="form-control input-md"
#firstName="ngModel"
required name="firstName"
minlength="4" appForbiddenName="bob"
type="text"
placeholder="First Name"
[(ngModel)]="personal.firstName">
<div style="font-size: 12px; color: red;"
*ngIf="firstName.invalid && (firstName.dirty || firstName.touched)"[hidden]="firstName.valid">
<div *ngIf="firstName.errors.required">*Required</div>
<div *ngIf="firstName.errors.minlength">Min length is 4</div>
<div *ngIf="firstName.errors.appForbiddenName">Name cannot be bob</div>
</div>
</div>
</div>
In the app.module.ts, I've imported the ForbiddenValidatorDirective from the shared folder I've created (it's underneath /* Shared Service */) :
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
/* App Root */
import { AppComponent } from './app.component';
import { NavbarComponent } from './navbar/navbar.component';
/* Feature Components */
import { PersonalComponent } from './personal/personal.component';
import { IncomeComponent } from './income/income.component';
import { BankComponent } from './bank/bank.component';
import { AddressComponent } from './address/address.component';
import { ResultComponent } from './result/result.component';
/* Routing Module */
import { AppRoutingModule } from './app-routing.module';
/* Shared Service */
import { FormDataService } from './data/formData.service';
import { WorkflowService } from './workflow/workflow.service';
import { ForbiddenValidatorDirective } from './shared/custom-validations.directive';
/* Animation Modules */
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
#NgModule({
imports: [BrowserModule,
FormsModule,
AppRoutingModule,
BrowserAnimationsModule,
ReactiveFormsModule
],
providers: [
{ provide: FormDataService, useClass: FormDataService },
{ provide: WorkflowService, useClass: WorkflowService }
],
declarations: [
AppComponent, NavbarComponent, PersonalComponent, IncomeComponent,
BankComponent, AddressComponent, ResultComponent, ForbiddenValidatorDirective
],
bootstrap: [AppComponent]
})
export class AppModule { }
I'm following the live example from angular.io's documentation and if I type the forbidden name "bob" in the input field, it's coming up as an error but the error message won't display.
screenshot
Other error messages, such as 'required' or 'min length is 4' are showing but not the error message for forbidden name. The input field is being highlighted red like I've styled to show it's an invalid input, but no error message for the custom validator appForbiddenName (or any other custom validation I've added).
I'm new to both Angular and Typescript, so excuse the potentially amateurish question. Someone please help, it seems trivial but I'm not sure everything Angular's doing.
Also, to build this angular app, I followed the tutorial here.
Your error is in this line:
<div *ngIf="firstName.errors.appForbiddenName">Name cannot be bob</div>
It should only be firstName.errors.forbiddenName
<div *ngIf="firstName.errors.forbiddenName">Name cannot be bob</div>
And also when you are using *ngIf or *ngalert module , import the common module from the angular. This will save from any further errors regarding this.
import { CommonModule } from '#angular/common';
#NgModule({
imports: [
..,
..,
CommonModule
],
declarations: []