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
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
})
app.component.ts
<div>
<app-head></app-head>
<app-body></app-body>
</div>
head.component.ts
...
#Component({
selector: 'app-head',
templateUrl: './head.component.html',
styleUrls: ['./head.component.scss'],
providers: []
})
...
body.component.ts
...
#Component({
selector: 'app-body',
templateUrl: './body.component.html',
styleUrls: ['./body.component.scss'],
providers: []
})
...
So the pages loads with content head + body but now I wanted to route to a different page and replace entire existing page with the new page. How do I do that?
In my app.module.ts I have the following...
const routes: Routes = [
{ path: 'newPage', component: NewComponent}
]
I wanted use when clicked a button to be redirected to this page and replace existing <app-head> and <app-body> is this possible?
If I just use below I still see the current <app-head> and <app-body>
<button type="button" (click)="loadNewPage()" >
body.component.ts
loadNewPage() {
this.router.navigate(['/newPage']);
}
The results give me the current page.... and doesnt really apply since I am not concating the contents together. I want to replace the head.html and body.html with newpage.html from the NewComponent.ts
You need to replace the content in AppComponent with a router-outlet component and move that replaced content to a new component such as HomeComponent. Use the HomeComponent in your default route so it will load when you initially visit the site.
It's probably best if you check the documentation for Routing & Navigation since this is a pretty fundamental topic in Angular and there are a lot of details you should learn before you get too far.
App.component.html
<router-outlet></router-outlet>
home.component.html
<div>
<app-head></app-head>
<app-body></app-body>
</div>
app-routing.module.ts
const routes: Routes = [
{ path: '', component: HomeComponent }
{ path: 'newPage', component: NewComponent}
]
You will want to put a <router-outlet></router-outlet> in your app component and move what's in your current app component to a new component. Then update your routes to:
const routes: Routes = [
{ path: '', component: TheStuffYouMovedComponent },
{ path: 'newPage', component: NewComponent }
]
Example:Tthis is a child component for app component, using command line
ng g c emp
to create it. what ever created it will fail at compile
time.
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-emp',
templateUrl: `
<h2>EmpList</h2>
<ul *ngFor="let emp of empArr">
<li>{{emp.name}} {{emp.id}} {{emp.age}}</li>
</ul>
`,
styleUrls: ['']
})
export class EmpComponent implements OnInit {
public empArr=[
{"id":1,"name":"jamal","age":25},
{"id":2,"name":"yasser","age":80},
{"id":3,"name":"zolla","age":11}
];
constructor() { }
ngOnInit() {
}
}
I got below error message:
> Module not found: Error: Can't resolve './
> <h2>EmpList</h2>
> <ul *ngFor="let emp of empArr">
> <li>{{emp.name}} {{emp.id}} {{emp.age}}</li>
> </ul>
> ' in 'D:\Angular\bind\src\app\emp'
> ERROR in ./src/app/emp/emp.component.ts
> Module not found: Error: Can't resolve './' in 'D:\Angular\bind\src\app\emp'
Since you're providing an inline template, the templateUrl property in your component decorator should be called template instead.
Alternatively, put your template in a separate file, and then you can refer to it by URL.
You need to do changes in your emp.component.ts file.
Angular 6 provides template injection in 2 way.
By using templateUrl :
If you use templateUrl your code should look like :-
#Component({
selector: 'app-emp',
templateUrl: './emp.component.html',
styleUrls: ['']
})
Here you need to provide the link of external html file where you can put your html code.
I have created demo for this example.
By using template: If you use template only in your code, it should look like-
#Component({
selector: 'app-emp',
template:
<h2>EmpList</h2>
<ul *ngFor="let emp of empArr">
<li>{{emp.name}} {{emp.id}} {{emp.age}}</li>
</ul>
,
styleUrls: ['']
})
Please have a look for another demo using template selector.
I think it will clear idea and difference between templateUrl and template.
You are providing html into templateUrl ...
Basically from angular2 in #component constructor object have few properties for component.html linking
templateUrl : here we provide relative path of component.html
file.
template : here we provide html used in component.
so you can use anyone and provide input accordingly.
#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
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??