Angular issue with Interpolation and also implementing elements - javascript

I have got a problem with String Interpolation.
So I try to make string interpolation according to what the teacher does in the course of Angular
i am doing.
I have a server.component.ts file which is exactly what teacher does in the course.
import { Component } from "#angular/core";
#Component ({
selector: 'app-servers',
templateUrl: './server.component.html'
})
export class ServerComponent {
serverId = 10;
serverStatus = 'offline'
}
And then I try to put it on the server.component.html so it appeared on the browser:
<p>Server with ID {{ serverId }} is {{ serverStatus }}</p>
I have checked multiple times and it seems like I have exactly the same setting that the teacher showed in the course. He has it written in the browser, and I do not.
Here are my other "settings"
app.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
styles: [`
h1{
color: red
}
`]
})
export class AppComponent {
name = 'Wojtek';
}
**app.component.html
**
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>Hellloo!!!!</h1>
<input type="text">
<p>{{ name }}</p>
<hr>
<app-success-alert></app-success-alert>
<app-warning-alert></app-warning-alert>
</div>
</div>
</div>
app.module.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { AppComponent } from './app.component';
import { ServerComponent } from './server/server.component';
import { ServersComponent } from './servers/servers.component';
import { SuccessAlertComponent } from './success-alert/success-alert.component';
import { WarningAlertComponent } from './warning-alert/warning-alert.component';
#NgModule({
declarations: [
AppComponent,
ServerComponent,
ServersComponent,
SuccessAlertComponent,
WarningAlertComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Also the thing is with implements OnInit in the export class line, in the course it works, however in my VSCode it does not really want to, any ideas?
Please it you may help me I would be really grateful!
I have tried to watch multiple youtube videos, also I came back to the course to rewatch it

It looks like your are missing the server-component in your app-component template. Put <app-servers></app-servers> somewhere in your app-component template.

Related

Angular Material Design Input elements invisible on page load

I'm practicing the use of Anuglar Material Design components. I have gone through the regular steps to add Angular Material using 'ng add #angular/material' and selected one of the themes and okayed other defaults.
Everything works well, except that the form inputs are not visible in any of the browsers. They become visible only after intuitively clicking on the screen, guessing where the input maybe present. When I focus out of the input, the input field disappears
//app module ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import {MatInputModule} from '#angular/material/input'
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
MatInputModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
//app component ts
import { Component, NgModule } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
title = 'ang-mat-design';
}
<!--no code added -->
<mat-form-field appearance = "fill">
<input matInput placeholder = "Input">
<mat-hint>Sample Hint</mat-hint>
</mat-form-field>

How can I set text of button in angular reactive form

I have a form which allows me to create a new record or update an existing one. Right now the text of the button is submit. Based on if I call the form with an optional parameter which in my case is the id of the record to edit I set my form mode as create or update. What I want is to be able to set the text displayed as either create or update but I have not found a way to change the text from my controller. I can set all field values and enable or disable the submit button but have not found a way to set the Text on button. Can this be done and if not is there a work around
In your ts file.
export class AppComponent {
buttontext="Create"
name = 'Angular';
}
In your HTML File
<button>{{buttontext}}</button>
You can change button text accordingly.In your functions
See here-https://stackblitz.com/edit/angular-wsxkz9
If you are looking for some other solution you have to create your own directive
CustomDirective.ts file
import { Directive, ElementRef, Input, Renderer2 } from '#angular/core';
#Directive({ selector: '[myHidden]' })
export class HiddenDirective {
constructor(public el: ElementRef,private renderer: Renderer2) {}
#Input() myHidden: boolean;
ngOnInit(){
// Use renderer to render the emelemt with styles
console.log(this.myHidden)
if(this.myHidden) {
this.renderer.setProperty(this.el.nativeElement, 'innerHTML', 'Create');
}
else{
this.renderer.setProperty(this.el.nativeElement, 'innerHTML', 'Delete');
}
}
}
app.module.ts
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 { HiddenDirective } from './customdirective';
#NgModule({
imports: [ BrowserModule, FormsModule ],
declarations: [ AppComponent, HelloComponent,HiddenDirective ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
app.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
val="true";
name = 'Angular';
}
app.component.html
<hello name="{{ name }}"></hello>
<p>
Start editing to see some magic happen :)
</p>
<button [myHidden]="val"></button>
See this- https://stackblitz.com/edit/angular-ktf7e3

Angular6 - Animation when change value

I searched on Google how to do what I want to do and tried some things but nothing works and I found a lot of AngularJS tutorial but not Angular6.. so I hope u will be able to help me.
I want to make a fade when my array's values change (on click) so I downloaded ng-animate but it doesn't give me the behaviour I'm looking for.
Currently, I've got two components so the first:
HTML:
<div style="text-align: center; margin: 20px 0">
<div class="buttonSelector" *ngFor="let select of buttonSelector" (click)="getSelectArray(select.title)"
[ngClass]="{'selected': select.title === selectedArray.title.toUpperCase() }">
<p>{{ select.title }}</p>
</div>
</div>
<app-infoapp [selectedArray]="selectedArray"></app-infoapp>
There, I change my selectedArray by sending a variable to getSelectArray() then I send it to my 'app-infoapp' component.
On my 'app-infoapp' component, we can find this:
import {Component, Input, OnInit} from '#angular/core';
import { trigger, transition, useAnimation } from '#angular/animations';
import {bounce, fadeIn} from 'ng-animate';
#Component({
selector: 'app-infoapp',
templateUrl: './infoapp.component.html',
styleUrls: ['./infoapp.component.css'],
animations: [
trigger('fade', [transition('* => *', useAnimation(fadeIn, {delay: 0.2}))])
]
})
export class InfoappComponent implements OnInit {
#Input() selectedArray;
fade: any;
constructor() {
}
}
So now when I refresh my page, the component is fading so that's cool but when I change my array by clicking on the button so another array is sent to my 'app-infoapp' component, it doesn't animate another time.
I hope I was clear and that u will be able to help me.
If you need more informations or if I wasn't clear tell me, I'll answer as fast as possible.
Thanks.
I tried the same example which i suggested to you (kdechant.com/blog/angular-animations-fade-in-and-fade-out) with your sample code and it is working:
Import BrowserAnimationsModule in the application module (app.module.ts):
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
#NgModule({
declarations: [...],
imports: [BrowserAnimationsModule],
bootstrap: [AppComponent]
})
export class AppModule { }
parent.component.html
<div style="text-align: center; margin: 20px 0">
<div *ngFor="let select of buttonSelector" (click)="getSelectArray(select.title)">
<p>{{ select.title }}</p>
</div>
</div>
<app-infoapp [selectedArray]="selectedArray"></app-infoapp>
parent.component.ts
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-parent',
templateUrl: './parent.component.html',
styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {
public buttonSelector = [];
public selectedArray = [];
constructor() { }
ngOnInit() {
this.buttonSelector = [{title: 'save'}, {title: 'add'}, {title: 'edit'}, {title: 'delete'}];
}
getSelectArray(title: string) {
this.selectedArray.push({title:title});
}
}
info-app.component.html
<div class="info" *ngFor="let selected of selectedArray" [#simpleFadeAnimation]="'in'">
{{ selected.title }}
</div>
info-app.component.ts
import {Component, Input, OnInit} from '#angular/core';
import { trigger, transition, state, style, animate } from '#angular/animations';
#Component({
selector: 'app-infoapp',
templateUrl: './info-app.component.html',
styleUrls: ['./info-app.component.css'],
animations: [
trigger('simpleFadeAnimation', [
state('in', style({opacity: 1})),
transition(':enter', [
style({opacity: 0}),
animate(600 )
]),
transition(':leave',
animate(600, style({opacity: 0})))
])
]
})
export class InfoAppComponent implements OnInit {
#Input() selectedArray = [];
constructor() {}
ngOnInit() {}
}

angular 4 : Can't bind to 'ngForFor' since it isn't a known property of 'li'

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"

Can't get input field to show on Angular 4

I'm following this Angular 4 tutorial:
https://youtu.be/z6qFqlwUxkQ?t=16m33s
And in that part of the video he has the following code:
View:
<input type="text" [(ngModel)]="name">
<p>{{ name }}</p>
Controller:
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
name = '';
}
It works for him but not for me, I'm not getting any compilation errors but the page is blank, I don't see an input field at all. Any idea why? I have the exact same code and am using Angular 4 also..
EDIT:
here's the contents of app.modue.ts:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Can you post code for app-module.ts
I suspect you are missing something inside #ngModule
Compare that to the video...
I suspect it's one of FormsModule or ReactiveFormsModule
haven't watched video... You'll probably be using FormsModule if it's a Hello World type scenario.
import {FormsModule, ReactiveFormsModule} from '#angular/forms';
NgModule({
....
imports: [ ...,
FormsModule,
ReactiveFormsModule]
....
})
export class AppModule {
}

Categories