Hi i'm new to angular and not able to solve the problem.
I'm getting a image-url from server which is localhost:8080 but when I try to set URL as a background-image, its not working.
In app.component.html:
<div class="card" [style.background-image]="tempImg">
</div>
In component.ts
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
tempImg = "http://localhost:8080/image/X_X_X_BG.png";
}
When I run this code in console getting error :
http://localhost:4200/localhost:8080/image/X_X_X_BG.png - 404 not found.
How to neglect the first localhost:4200??
Related
I've created a library in angular 6. The problem is that styling is not applied. Here is my code:
mycustom.component.html
<div class="cutom-div">
Hello
</div>
mycustom.component.ts
import { Component, OnInit } from "#angular/core";
#Component({
selector: "lib-mycustom",
templateUrl: "./mycustom.component.html",
styleUrls: ["./mycustom.component.scss"],
})
export class MycustomComponent implements OnInit {
constructor() {}
ngOnInit() {}
}
mycustom.component.scss
.custom-div {
background: red;
height: 20px;
}
This was supposed to be simple. But there's no styling applied. I inspected the element also:
What else I'm missing out here. Please point out my mistake.
I'm building the library normally:
ng build my-library and then cd dist\my-library>npm pack
https://angular.io/api/core/ViewEncapsulation#None
None means that Angular does no view encapsulation. Angular adds the CSS to the global styles. The scoping rules, isolations, and protections discussed earlier don't apply. This mode is essentially the same as pasting the component's styles into the HTML.
#Component({
selector: "lib-mycustom",
templateUrl: "./mycustom.component.html",
styleUrls: ["./mycustom.component.scss"],
encapsulation: ViewEncapsulation.None, // <- This need use for global style
})
In my app, I use the widget which displays in shadow-root, and inside it has a div with an id where I need to insert my component. Like:
<widget>
#shadow-root (open)
....
<div id='container'> // need to insert component here // </div>
...
</widget>
For now, in test.html I have simple
<div #test>It works!</div>
In widget settings, I could get this <div id='container'></div> as parameter and pass it to my component, so test.ts looks like
#Component({
selector: 'test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.less'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class Test implements OnInit, AfterViewInit {
#Input() container: HTMLDivElement,
#ViewChild('test', { static: true }) test: ElementRef;
ngAfterViewInit(): void {
const testElement = this.test.nativeElement;
container.appendChild(testElement);
}
}
The problem is that when it inserts to the shadow-root it doesn't see the styles from test.component.less. I tried :host{} :host ::ng-deep {} and it still doesn't work.
So my question is - is there a way to apply styles from test.component.less to my .html file, while it's inside shadow-root?
Would be really grateful for any help!
Maybe you need set view encapsulation to none
#Component({
selector: 'test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.less'],
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None
})
hope helped you.
I am doing a click cat game, and when I put the path of the image of the cat in the component's template using img, the image does not appear when running the page.
I tried to use the img as property using [img]="path", and also enter the path directly to the img element
Template:
<div>{{catName1}}</div>
<div>
<img src="./image/cat.jpg" (click)="clickUp()">
</div>
<div>{{catClick1}}</div>
</div>
Typescript
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
catName1 = 'Misho';
catImg1 = 'image/cat.jpg';
catClick1 = 0;
clickUp(){
this.catClick1 += 1;
}
}
How it is showing
Folder of the image
Everything's fine with your code.
Just move your image folder from
/src/app/image
to
/src/assets
directory & do change the src in
app.component.html
#Component({
selector: 'app-test-base',
templateUrl: '<button (click)="someMethod()">Button on Base Component</button>>',
styleUrls: ['./test-base.component.css']
})
#Component({
selector: 'app-derived',
templateUrl: './derived.component.html',
styleUrls: ['./derived.component.css']
})
export class derivedComponent extends baseComponent implements OnInit {...}
Is possible to inject this button on derived HTML component?
If i understood what you have/want..
You can call like so:
<app-test-base></app-test-base>
on your derived.component.html page, and your app-test-base components gets started up on your derived component. Do note that the someMethod method should be declared on the app-test-base and all the other logic for interacting with that page.. You can also pass Inputs and receive Outputs from this kind of behaviour.. but thats another story :3
I am using this angular ng2 slide menu library. Can you please suggest me how to close the menu after selecting any item.
The configuration says there is an option. Not sure how to configure the value.
Thanks,
Raja K
as per angular ng2 slide library documentation
in your template you add config attribute, like
<cuppa-slidemenu
[menulist]="menuItemsArray"
[config]="config"
(open)="onMenuOpen()"
(close)="onMenuClose()"
(onItemSelect)="onItemSelect($event)">
</cuppa-slidemenu>
and in your ts file, you can define config, as shown in documentation.
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
config = {
closeOnCLick: true
};
}
here is a live working demo