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.
Related
I have the following code. According to my requirement,
If I press tab from keyboard, then <div> element should be focused and (click) event should work - it is working fine currently
but if I click the same <div> element with mouse click, then this <div> element should not be focused and (click) event should work - here <div> element is focussing on first click only with the current code, don't know why ?
I am not sure what I am doing wrong here, Please help me to fix this issue. Thanks in advance.
Stackblitz
html:
<button>First</button> <br/>
<div tabindex="0" (click)="func();" (keyup.enter)="func();" appDivfocusout>Check Focus Out on Click</div> <br/>
<button>Second</button>
component.ts:
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular';
func(){
console.log("test message");
}
}
directive.ts:
import { Directive, ElementRef, Renderer2, HostListener } from '#angular/core';
#Directive({
selector: '[appDivfocusout]'
})
export class DivfocusoutDirective {
constructor(private el: ElementRef, private renderer: Renderer2) { }
#HostListener('click',['$event'])
onClick(e){
this.el.nativeElement.style.outline = 'none';
}
}
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 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.