I want to include one component HTML data into another component. I tried a lot but I am unable to get the results.
</hello> </hello> is the selector tag of the HelloComponent and I am including into the AppComponent.But its not showing the combined data in app.component.html page.
app.component.ts
import { Component } from '#angular/core';
import { HelloComponent } from './hello.component';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
htmldata = '';
ngOnInit(){
this.createHtmlData();
}
createHtmlData() {
//</hello></hello> is selector tag of hello.component.ts
this .htmldata = '<p>My Data</p><hello></hello>';
}
}//class
app.component.html
<div class="container">
<h1> {{ title }} </h1>
<div>{{ htmldata }}</div>
</div>
hello.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'hello',
templateUrl: './hello.component.html',
styleUrls: ['./hello.component.css']
})
export class HelloComponent {
}
hello.component.html
<div class="take-action">
<span class="un_config_link" (click)="takeAnAction()">Take an action on</span>
</div>
You import HelloComponent from hello.component.js in AppComponent but it export only a PopupComponent and your selector is wrong
[edit] you need to add HelloComponent to the module declaration of your app, remove the empty line between your #component block of helloComponent and the following class then it would work I believe.
Related
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.
I'm new to angular &I have a component as follows
import { Component, OnInit } from '#angular/core';
import { HttpClient } from '#angular/common/http';
#Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
constructor(private http: HttpClient) { }
blogpost;
ngOnInit() {
this.http.get("http://localhost:8080/demo/all").
subscribe(function(data){
this.blogpost=data;
console.log(this.blogpost);
})
}
}
blogpost field contains an array of blogposts obejects
and here is the template associated with component
<div class="row">
<div class="col-sm-6">
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-6"><app-blog-post [title]="blogpost[0].title"></app-blog-post></div>
<div class="col-sm-6">456</div>
</div>
<div class="row">
<div class="col-sm-6">123</div>
<div class="col-sm-6">456</div>
</div>
</div>
</div>
but value passed from this template is not showing in the child component,and I'm getting the error TypeError: Cannot read property '0' of undefined
here is the child component
import { Component, OnInit, Input } from '#angular/core';
#Component({
selector: 'app-blog-post',
templateUrl: './blog-post.component.html',
styleUrls: ['./blog-post.component.css']
})
export class BlogPostComponent implements OnInit {
ngOnInit() {
}
#Input() title:String="abc";
}
and child template
<div>{{title}}</div>
I couldn't figure out what is wrong. Please somebody help me with this
Move blogpost to out of the constructor then declare it as
import { Component, OnInit } from '#angular/core';
import { HttpClient } from '#angular/common/http';
#Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
public blogpost: Array<any> = [];
constructor(private http: HttpClient) { }
ngOnInit() {
this.http.get("http://localhost:8080/demo/all").
subscribe(function(data){
this.blogpost=data;
console.log(this.blogpost);
})
}
}
Don’t forget that http calls are asynchronous so your Post list is not defined before your get request is completed. And so index 0 of undefined is invalid. One solution could be to use ˋ*ngIf="!!blogpost" on app-blog-post component.
A better solution could be using async pipe. Here is a good example : https://medium.com/angular-in-depth/angular-question-rxjs-subscribe-vs-async-pipe-in-component-templates-c956c8c0c794
I am learning Angular now. And i am just stuck in a Data binding concept. I have wrote below code in 2 file. But it won't work.
app.component.ts
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
constructor(){}
name = 'Rakesh';
ngOnInit(){
}
changeMyTitle() {
this.name = 'Rocky';
}
}
app.component.html
<p>My name is {{ name }} </p>
" Here is a Button code in Html calling changeMyTitle()"
You need to bind click event to your button and invoke changeMyTitle() defined in your component.
Just use this in your HTML:
<p>My name is {{ name }} </p>
<button (click)="changeMyTitle()">Change name</button>
here is the stackblitz with working example.
So assuming that I have an Angular 4 component like this:
#Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css'],
})
export class HomeComponent implements OnInit {
printThisValue = 'customAttr';
constructor(){}
}
How to I print the value inside an HTML tag just like this code seen below:
<div class="myStyle" {{ printThisValue }} ></div>
The HTML code above seems to not work. I'm aware that you are able to print the value like this:
<div class="myStyle">{{ printThisValue }}</div>
// or like this
<div class="myStyle {{ printThisValue }}"></div>
But how do I go about this?
There may be a better / easier way to do this, but you can create a directive that takes the name of the attribute and then sets it on the element.
import { Directive, Input, ElementRef, AfterViewInit } from '#angular/core';
#Directive({
selector: '[customAttr]'
})
export class CustomDirective implements AfterViewInit {
#Input() customAttr;
constructor(private elRef: ElementRef) {}
ngAfterViewInit() {
this.elRef.nativeElement.setAttribute(this.customAttr, true);
}
}
Then you can use it like: <div class="myStyle" [customAttr]="printThisValue"> and it will be emitted with <div class="myStyle" customAttr>.
Check which one can be your solution
Case 1 : Conditional attribute
<div class="myStyle" [attr.attr_name]="condition"></div>
Case 2 : Customized (dynamic) attribute name
HTML (Template)
<div #elem1>
{{ attachAttr }} Hi
</div>
TypeScript of a Sample Component
import { Component, ViewChildren, QueryList, AfterViewInit } from '#angular/core';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
myAttr = "custom_attr"; // Customize attribute name
attachAttr: any;
#ViewChildren('elem1') elem;
ngAfterViewInit() {
this.elem['first'].nativeElement.setAttribute(this.myAttr,"");
}
}
Output will be
<div custom_attr> Hi </div>
I am trying to bind some data but is not working on
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
template : `<child [in]="25"></child>`
})
export class AppComponent {}
and the child component
import { Component, Input } from '#angular/core';
#Component({
selector: 'child',
template: '<h1>{{in}}</h1>',
})
export class ChildComponent {
#Input() in: string;
}
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
template : <child [in]="25"></child>
})
export class AppComponent {}
import { Component, Input } from '#angular/core';
#Component({
selector: 'child',
template: '{{in}}',
})
export class ChildComponent {
#Input() in: string;
}
Nothing wrong in this code .. every thing is working fine.
You have two ways of assigning values to an input of a component:
1) Either by passing directly the string value to the input from the template:
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
template : `<child in="25"></child>`
})
export class AppComponent {}
2) Or by binding the input to a variable defined in your class:
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
template : `<child [in]="myVar"></child>`
})
export class AppComponent {
public myVar: string = "25";
}
As a result you cannot bind the input to a numeric variable as you did here, simply because a variable defined in a class cannot be numeric (but it surely can be alphanumeric).
You should actually assign a variable and then refer it. public Hello = "25";
Then [in]="this.hello"
OR
Remove the brackets and assign directly
in ="25";