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.
Related
Hello i want to pass a number from component to another and i'm using #input.
Here my parent component :
#Component({
selector: 'inter-asp',
styleUrls: [('./asp.component.scss')],
templateUrl: './asp.component.html',
template: '<app-my-dialog [hellovariable]="hellovariable"></app-my-dialog>',
providers: [PaginationConfig],
})
export class aspComponent implements OnInit {
public hellovariable: number = 100;
}
and here 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;
}
in the child component i want to show the content of my variable hellovariable passed from parent component but i get undefined it is not passed so what is the problem here.
In the parent template you have to pass the input to the child as a property of the child component
<app-child-component [prop]="prop"></app-child-component>
It takes preference to the template url, remove that part and have it as
#Component({
selector: 'inter-asp',
styleUrls: [('./asp.component.scss')],
template: '<app-my-dialog [hellovariable]="hellovariable"></app-my-dialog>',
providers: [PaginationConfig],
})
STACKBLITZ DEMO
When I click on the Test, the click function should be called.
But nothing is triggered.
HTML componrnt:
<div class="row m-0 justify-content-between" *ngFor="let i of
k[currentk]?.details | keys">
<div (click)="test(i.name)">{{i.name}}</div>
</div>
ts component:
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.scss']
})
export class TestComponent implements OnInit {
constructor() {}
ngOnInit() {}
test(name){
alert('Hello world');
}
}
You're already doing it right. You don't need the *ngFor loop in your div tag. SImply remove it and your code shall work.
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 using angular 4 in mvc architecture . wheneve i gona pass mvc view in template url in the app.component.ts file it shows some error.
can i pass the mvc view in the type script file or i have to create a html file in app folder.
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
templateUrl: '/Home/Index.cshtml',
})
export class AppComponent {
name = '';
}
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div id="Registeration">
<my-app>Loading AppComponent content here ...</my-app>
<input type="text" [(ngmodel)]="name"/>
<p>{{name}}</p>
</div>
Possible solution
app.component.ts
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
app.component.html
<child-cmp></child-cmp> <------ selector of child component
child.component.ts
#Component({
selector: 'child-cmp', <----pass this selector to view this component
templateUrl: './child.component.html',
styleUrls: ['./child.component.css']
})
name = 'child';
Put your index.cshtml file in child.component.html
child.component.html
<div id="Registeration">
<input type="text" [(ngmodel)]="name"/>
<p>{{name}}</p>
</div>
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.