I have two components its called app.component and child.component. I want to pass the data from parent to child. My code is below. Where am i making mistake?
app.component.ts
import { ChildComponent } from './child.component';
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
entryComponents:[ChildComponent]
})
export class AppComponent {
title = 'app works!';
}
child.component.ts
import { AppComponent } from './app.component';
import { Component, Input } from '#angular/core';
#Component({
selector: 'child',
templateUrl: './child.component.html'
})
export class ChildComponent {
#Input() input :string;
}
app.component.html
<h1>
{{title}}
</h1>
<child [input]="parent to child"> </child>
child.component.html
<div>{{input}}</div>
app.module.ts
import { ChildComponent } from './child.component';
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';
#NgModule({
declarations: [
AppComponent,
ChildComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
If you write [input]="parent to child" to the template then it means that you are refering to the parent components this.parent to child which doesn't exists.
You can do something like this:
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
entryComponents:[ChildComponent]
})
export class AppComponent {
title = 'app works!';
parentInput = 'parent to child';
}
then in the template:
<h1>
{{title}}
</h1>
<child [input]="parentInput"> </child>
Source: https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-child
Just change this line and you are good to go
<child input="parent to child"> </child>
Or if you want to do
<child [input]="parent to child"> </child>
#echonax has alredy given the answer.
Related
I'm trying to use a component ('register') inside the app.component and it throws me this error:
Error: src/app/app.component.html:88:1 - error NG8001: 'register' is
not a known element:
If 'register' is an Angular component, then verify that it is part of this module.
To allow any element add 'NO_ERRORS_SCHEMA' to the '#NgModule.schemas' of this component.
88
My app.component.html:
...
<register></register>
...
My register.component.ts:
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-register',
templateUrl: './register.component.html',
styleUrls: ['./register.component.css']
})
export class RegisterComponent implements OnInit {
public title:string;
constructor() {
this.title = 'Registrar';
}
ngOnInit(): void {
console.log('Componente de registro cargado');
}
}
My app.component.ts:
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'red soc';
}
My 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 { RegisterComponent } from './register/register.component';
#NgModule({
declarations: [
AppComponent,
RegisterComponent
],
imports: [
BrowserModule,
AppRoutingModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Your selector is 'app-register' but you are using 'register' .
Use 'app-register' istead of 'register'
I hope it will solve the issue.
I needed to localize the ngx-timeago. It works fine, but I don't know how to change from Deutch to Spanish when pressing a button.
This the template:
{{ date | timeago:live}}
<div class="btn">Change Language</div>
This is the code of my Module:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { TimeagoModule, TimeagoIntl, TimeagoFormatter, TimeagoCustomFormatter } from 'ngx-timeago';
#NgModule({
imports: [ BrowserModule, FormsModule, TimeagoModule.forRoot({formatter: { provide:
TimeagoFormatter, useClass: TimeagoCustomFormatter },})
],
providers: [TimeagoIntl],
declarations: [ AppComponent, HelloComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
And this is the code of my Component:
import { Component } from '#angular/core';
import { strings as stringsDe } from 'ngx-timeago/language-strings/de';
import { strings as stringsEs } from 'ngx-timeago/language-strings/es';
import { TimeagoIntl } from 'ngx-timeago';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
constructor(intl: TimeagoIntl) {
intl.strings = stringsEs;
intl.changes.next();
}
name = 'Angular';
date = new Date();
}
I created a demo.
Thanks a lot!
You need to add (click) on the button and bind accordingly:
<div class="btn" (click)="changeLang()">Change Language</div>
in component:
changeLang(){
this.intl.strings = stringsEs;
this.intl.changes.next();
}
Try this demo
I want to pass a variable from one component to another and I'm using #input
This is my parent component :
#Component({
selector: 'aze',
templateUrl: './aze.component.html',
styleUrls: [('./aze.component.scss')],
providers: [PaginationConfig],
})
export class azeComponent implements OnInit {
public hellovariable: number = 100;
}
This is the template of the parent component:
<app-my-dialog [hellovariable]="hellovariable"></app-my-dialog>
This is my child component :
#Component({
selector: 'app-my-dialog',
templateUrl: './my-dialog.component.html',
styleUrls: ['./my-dialog.component.css']
})
export class MyDialogComponent implements OnInit {
#Input() hellovariable: number;
constructor() { }
ngOnInit() {
console.log(hellovariable);
}
This is the child template:
<h3>Hello I am {{hellovariable}}<h3>
And this is the app.module.ts:
#NgModule({
declarations: [
AppComponent,
MyDialogComponent
],
entryComponents: [
MyDialogComponent
],
imports: [
BrowserModule,
routing,
NgbModule,
BrowserAnimationsModule,
ToastrModule.forRoot(),
RichTextEditorAllModule,
FullCalendarModule,
NgMultiSelectDropDownModule.forRoot(),
LeafletModule.forRoot(),
NgxGalleryModule,
HttpClientModule,
MatDialogModule,
ReactiveFormsModule
],
When I show my parent component template I get this error:
Can't bind to 'hellovariable' since it isn't a known property of 'app-my-dialog'.
Any idea on how to fix this?
Few thing to try
First make sure you have import Input into your component
import { Component, Input } from '#angular/core';
Then follow pascal convention when naming class
export class azeComponent implements OnInit
should change to
export class AzeComponent implements OnInit
Then register your component into your module declarations
Also import BrowserModule into your module also something like this
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
#NgModule({
declarations: [
AppComponent,
MyDialogComponent,
AzeComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Mostly you'll get this error because you forgot to declare the component into your app.module.ts or did it wrong
app.module.ts
import { YourSpecificComponent } from './components/measureUnit/measure-unit-monthly/measure-unit-monthly.component';
#NgModule({
declarations: [
AppComponent,
MessageComponent,
DashboardComponent,
.....,
YourSpecificComponent, // declared here
}
your-specific.component.ts
#Component({
selector: 'app-your-specific', // your selector
templateUrl: './your-specific.component.html',
styleUrls: [
'../some.css'
]
})
export class YourSpecificComponent implements AfterContentInit {
.....
ok this error causes because you need to import MyDialogComponent in azeComponent's module.
Although I have added FavoriteComponent in declarations[] array in app.module.ts I am still getting the error:
Unexpected directive 'FavoriteComponent' imported by the module
'AppModule'. Please add a #NgModule annotation.
favorite.component.ts
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'favorite',
template: '<span class="glyphicon glyphicon-star"></span>'
})
export class FavoriteComponent {
}
courses.component.ts
import { Component, OnInit, transition } from '#angular/core';
#Component({
selector: 'courses',
templateUrl: './courses.component.html'
,
styleUrls: ['./courses.component.css'],
})
export class CoursesComponent {
text= `
Lorem Ipsum is sumply a dummy text Lorem Ipsum is sumply a dummy text
`
}
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import{FormsModule} from '#angular/forms';
import { AppComponent } from './app.component';
import { CoursesComponent } from './courses/courses.component';
import { SummaryPipe } from './summary.pipe';
import { FavoriteComponent } from './favorite/favorite.component';
#NgModule({
declarations: [
AppComponent,
CoursesComponent,
SummaryPipe,
FavoriteComponent
],
imports: [
BrowserModule,FormsModule
],
exports: [
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
I've just started learning angular 4. This is a simple code that I'm trying to implement in Visual Studio Code, but keep getting this error.
Uncaught Error: Template parse errors:
Can't bind to 'ngForFor' since it isn't a known property of 'li'. ("
</ul>
<ul>
<li [ERROR ->]*ngFor="let hobby for hobbies">{{hobby}}</li>
</ul>"): ng:///AppModule/UserComponent.html#6:6
Property binding ngForFor not used by any directive on an embedded template.
Make sure that the property name is spelled correctly and all directives are
listed in the "#NgModule.declarations".("
</ul>
<ul>
[ERROR ->]<li *ngFor="let hobby for hobbies">{{hobby}}</li>
</ul>"): ng:///AppModule/UserComponent.html#6:2
I tried previous solutions of adding the CommonModule to the app.module file. But it hasn't solved the issue.I cannot figure out what is wrong.
app.component.ts:
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
}
app.module.ts:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
import { UserComponent } from './components/user/user.component';
import {CommonModule} from '#angular/common';
#NgModule({
declarations: [
AppComponent,
UserComponent
],
imports: [
BrowserModule,CommonModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
user.component.ts:
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-user',
templateUrl: './user.component.html',
styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {
name:string;
age:number;
address: Address;
hobbies:string[];
constructor() {
console.log('constructor ran ...');
}
ngOnInit() {
console.log('ngOnInit ran ...');
this.name='Raul';
this.age=22;
this.address= {
street:'abc',
city:'xyz',
country: 'jkl'
}
this.hobbies=['reading','playing','swimming'];
}
}
interface Address{
street:string,
city:string,
country:string
}
user.component.html:
<h1>{{name}}</h1>
<ul>
<li>Age:{{age}}</li>
<li>Address:{{address.street}}, {{address.city}},{{address.country}}</li>
</ul>
<ul>
<li *ngFor="let hobby for hobbies">{{hobby}}</li>
</ul>
should be of instead of for inside the ngFor
ngFor="let hobby of hobbies"