How can I update ngx-timeago language on button press? - javascript

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

Related

Can't bind to since it isn't a known property of selector component

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.

I am using angular code to call the rest api and display it on the screen

The following code is my viewall.ts code
import { Component, OnInit } from '#angular/core';
import { Injectable } from '#angular/core';
import { HttpClient } from '#angular/common/http';
#Component({
selector: 'app-viewall',
templateUrl: './viewall.component.html',
styleUrls: ['./viewall.component.css']
})
#Injectable()
export class RestComponent {
constructor(private http: HttpClient) { }
configUrl = "http://34.201.147.118:3001/getAllData";
getConfig() {
return this.http.get(this.configUrl);
}
}
This is my app.module.ts code
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import {FormsModule} from'#angular/forms';
import { AppComponent } from './app.component';
import { RestComponent } from './rest/rest.component';
import { ViewallComponent } from './viewall/viewall.component';
import { HttpClientModule} from '#angular/common/http';
#NgModule({
declarations: [
AppComponent,
RestComponent,
ViewallComponent
],
imports: [
BrowserModule,FormsModule,
HttpClientModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
it is giving e the following error ERROR in src/app/app.module.ts(6,10): error TS2305: Module '"E:/paramount/paramount/src/app/viewall/viewall.component"' has no exported member 'ViewallComponent'.
Where is the exported class inside viewall.component.ts? You should be exporting a class from the component.
Haven't you declared RestComponent as Injectable and that too inside viewall.ts, and then you are importing it from rest.component file inside app.module.ts.
Try to move the RestComponent from the declarations array to providers array and also the import from the correct file.
Hope it helps.
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import {FormsModule} from'#angular/forms';
import { AppComponent } from './app.component';
import { RestComponent } from './rest/rest.component';
import { ViewallComponent } from './viewall/viewall.component';
import { HttpClientModule} from '#angular/common/http';
#NgModule({
declarations: [
AppComponent,
ViewallComponent
],
imports: [
BrowserModule,FormsModule,
HttpClientModule,
],
providers: [
RestComponent,
],
bootstrap: [AppComponent]
})
export class AppModule { }
Your viewall.component.ts should be exporting a class and look like this:-
import { Component, OnInit } from '#angular/core';
import { Injectable } from '#angular/core';
import { HttpClient } from '#angular/common/http';
#Component({
selector: 'app-viewall',
templateUrl: './viewall.component.html',
styleUrls: ['./viewall.component.css']
})
export class ViewallComponent{}
injectable service is in providers
you can try with this solution.
providers: [
RestComponent,
],
declarations: [
AppComponent,
ViewallComponent
],
In viewall component.ts
import { Component, OnInit } from '#angular/core';
import { Injectable } from '#angular/core';
import { HttpClient } from '#angular/common/http';
#Component({
selector: 'app-viewall',
templateUrl: './viewall.component.html',
styleUrls: ['./viewall.component.css']
})
export class ViewallComponent{
constructor() { }
}
#Injectable()
export class RestComponent {
constructor(private http: HttpClient) { }
configUrl = "http://34.201.147.118:3001/getAllData";
getConfig() {
return this.http.get(this.configUrl);
}
}

error when trying to inject router into app.component.ts

I am having trouble injecting router into the constructor of the app.component.ts file, by calling "private router: Router".
It gives me the following error:
Error: "StaticInjectorError(AppModule)[AppComponent -> Router]:
StaticInjectorError(Platform: core)[AppComponent -> Router]:
NullInjectorError: No provider for Router!"
But when I remove the injection, the page works fine, but I cannot use the navigate function to load into other components.
Here is what I have
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';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.ts
import { Component, OnInit } from '#angular/core';
import { Router } from '#angular/Router';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers: [MessageParser]
})
export class AppComponent implements OnInit {
constructor(private router: Router) {}
ngOnInit() {}
goToLobby() {
this.router.navigate(['lobby']);
}
}
app.component.html
<button (click)="goToLobby()">Go to lobby</button>
<router-outlet></router-outlet>
app-routing.module.ts
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { MainComponent } from './main/main.component';
import { LobbyComponent } from './lobby/lobby.component';
import { GameComponent } from './game/game.component';
const appRoutes: Routes = [
{ path: '', component: MainComponent },
{ path: 'lobby', component: LobbyComponent },
{ path: 'game', component: GameComponent }
];
#NgModule({
imports: [
RouterModule.forRoot(appRoutes)
],
exports: [
RouterModule
]
})
export class AppRoutingModule {}
Remove RouterModule from your exports inside AppRoutingModule
#NgModule({
imports: [
RouterModule.forRoot(appRoutes)
],
exports: [
]
})

Unable to use a Child Component inside Parent Component template in Angular 2

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 { }

Can't bind to 'ngModel' since it isn't a known property of 'input'. ("="col-md-4 control-label" for="idNome">Nome: </label>

Can't bind to 'ngModel' since it isn't a known property of 'input'. ("="col-md-4 control-label" for="idNome">Nome:
app.module.ts:
import { FormsModule } from '#angular/forms';
#NgModule({
declarations: [ AppComponent],
imports: [
...
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
a app-routing.module.ts:
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
const routes: Routes = [];
#NgModule({
imports: [RouterModule.forRoot(routes), ],
exports: [RouterModule]
})
export class AppRoutingModule { }
a atendimento.module.ts:
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { AtendimentoRoutingModule } from './atendimento-routing.module';
import { AtendimentoComponent } from './atendimento/atendimento.component';
#NgModule({
imports: [
CommonModule,
AtendimentoRoutingModule
],
declarations: [AtendimentoComponent]
})
export class AtendimentoModule { }
and atendimento.component.ts:
import { Component, OnInit } from '#angular/core';
import { AtendimentoService } from '../atendimento.service';
import { Cliente } from '../../cliente/Cliente'
#Component({
selector: 'app-atendimento',
templateUrl: './atendimento.component.html',
styleUrls: ['./atendimento.component.css'],
providers: [AtendimentoService, Cliente]
})
export class AtendimentoComponent implements OnInit {
you need to add FormsModule to the a atendimento.module.ts as well, since your component is a part of AtendimentoModule
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { AtendimentoRoutingModule } from './atendimento-routing.module';
import { AtendimentoComponent } from './atendimento/atendimento.component';
import { FormsModule } from '#angular/forms';
#NgModule({
imports: [
CommonModule,
AtendimentoRoutingModule,
FormsModule
],
declarations: [AtendimentoComponent]
})
export class AtendimentoModule { }

Categories