I've encountered an issue with String Interpolation while following an Angular course.
In my server.component.ts file, I've implemented the same code as shown by the teacher in the course:
import { Component } from "@angular/core";
@Component ({
selector: 'app-servers',
templateUrl: './server.component.html'
})
export class ServerComponent {
serverId = 10;
serverStatus = 'offline';
}
After that, I tried to display it on the browser by adding this to server.component.html:
<p>Server with ID {{ serverId }} is {{ serverStatus }}</p>Despite double-checking multiple times, I can't seem to get it working like the teacher. The setting in my app.component.ts file looks like this:
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';
}
In 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>
In 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 { }
I'm also facing issues with "implements OnInit" not working as expected in VSCode. Any suggestions or help would be greatly appreciated!
I've watched several YouTube videos and even revisited the course content, but haven't been able to resolve the problem yet.