In order to use "Bootstrap Select" only in my.component.ts, I tried use this:
#Component({
templateUrl: 'my.component.html',
styleUrls: [
'my.component.css',
//Bootstrap Select
'https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css'
]
})
I got this error :
Can't resolve './https://cdnjs.cloudflare.com/...' in 'C:.....\app\components'
It seems that angular 2 search for bootstrap in my folder. So can I tell him that it is an external URL?
I am also need to add my js link:
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
From angular styles documentation.
Style URLs in metadata
You can load styles from external CSS files by adding a styleUrls
attribute into a component's #Component decorator:
#Component({
selector: 'hero-details',
template: `
<h2>{{hero.name}}</h2>
<hero-team [hero]=hero></hero-team>
<ng-content></ng-content>
`,
styleUrls: ['app/hero-details.component.css']
})
export class HeroDetailsComponent {
/* . . . */
}
The URL is relative to the application root, which is usually the location of the index.html web page that hosts the application. The
style file URL is not relative to the component file. That's why the
example URL begins src/app/. To specify a URL relative to the
component file, see Appendix 2.
You can also embed tags into the component's HTML template.
As with styleUrls, the link tag's href URL is relative to the
application root, not the component file.
#Component({
selector: 'hero-team',
template: `
<link rel="stylesheet" href="app/hero-team.component.css">
<h3>Team</h3>
<ul>
<li *ngFor="let member of hero.team">
{{member}}
</li>
</ul>`
})
CSS #imports
You can also import CSS files into the CSS files using the standard
CSS #import rule. For details, see #import on the MDN site.
In this case, the URL is relative to the CSS file into which you're
importing.
#import 'hero-details-box.css';
Now. For one of your purposes you could need to change encapsulation. It is the topic here. Load external css style into Angular 2 Component Give a look. It solves you for adding an external CDN but I wanted to give full info and why is it needed. To ensure you it is the only that solves your scenario.
Also, other suggestions there up resolves you for adding script tag. I suggest just add it to your component template, as you should do directly in the html what is yet specific of your component.
You have to give it a relative path to your file.
starting with "./ here goes the path to your css file /my.component.css"
And for the second css file thats being called. That one goes into your index.html file like so:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">
Related
So, i develop web app using Angular 7, one of the component however is using complex styling from old project, so i plan to just paste static HTML, CSS, and JS from static old project to one of the Angular component, how to do it?
i.e, I want to paste following HTML structure in Angular component:
<html>
<head>
...
...
<link rel="stylesheets"..
<link rel="stylesheets"..
<link rel="stylesheets"..
</head>
<body>
...
...
...
<script src="...
</body>
</html>
Notice that i need to use CSS and Script on that static page and only contained in single Angular component, i'm aware of declaring global CSS and JS that we need for our project in angular.json, however in this case i dont need global CSS or global JS, only contained on that one component, so, how to do it?
If you only want certain styles contained in a single Angular component then you can define then with inline styles on your template.
1) Wrap styles with style tag:
#Component({
template: `
<style>
h1 {
color: blue;
}
</style>
<h1>This is a title.</h1>
`
})
2) Normal inline styles in the template tags:
#Component({
template: '<h1 style="color:blue">This is a title.</h1>'
})
You can also include the script tags in your template to import a JS file whenever you're using this component.
3) Alternatively you can import the CSS files by using #import in your CSS file for the component:
#Component({
template: '<h1>This is a title.</h1>',
style: '#import url("custom.css");'
})
I am trying to use image viewer plugin in angular but my icon is not display
here is my code
export class AppComponent {
name = 'Angular';
images=['https://images.pexels.com/photos/144240/goat-lamb-little-grass-144240.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb']
}
https://stackblitz.com/edit/angular-u26jb5?file=src%2Fapp%2Fapp.component.ts
I am using this plugin
https://www.npmjs.com/package/ngx-image-viewer
I already follow all steps .I don't know why it is not showing icons
This happens because your url for image does not get sanitized by angular firewall. So angular is blocking the image from being loaded .
In order to sanititze the url
use safe pipe in code.
In view page:
<img [src]="catPictureUrl | safe: 'url'" alt="A Cat">
in app.component.ts:
public catPictureUrl: string = `https://www.petdrugsonline.co.uk/images/page-headers/cats-master-header`;
I really don't know why is this happening but even font-awesome is installed but the template is not getting the styles.
I tried adding the cdn to index.html and it just works fine.
Try adding cdn to index.html and you are good to go
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
Let's say I acquired a html5 template. The folder that contains HTML, css, js files, and other types of resources like pictures. I copied/pasted the Html and css to component.html and component.css.
When it comes to JavaScript, I have a folder called js containing few individual JavaScript files.
Where should I place the js folder and how to do I reference them in my application?
In the original file I have something like all the way to the bottom of the HTML file:
<script src="js/script1.js"></script>
<script src="js/script2.js"></script>
<script src="js/script3.js"></script>
Thanks for helping
You can put it under src/assets/js/script1.js
Then add it on .angular-cli.json
"apps": [
{
...
"scripts": [
"assets/js/script1.js"
]
}
]
To access your code on your typescript code,
you can access it globally via
declare const globalVar: any;
you have two choices
1 you can place it inside body tag in index.html like this
<body>
<app-root></app-root>
<script type="text/javascript" src="assets/jquery/jquery.min.js">
</script>
<script type="text/javascript" src="assets/js/script2.js">
</script>
</body>
2 you can place it inside scripts in .angular-cli.json file like this
"scripts": [
"./assets/js/script2.js"
"assets/jquery/jquery.min.js"
],
and if you want to access the code inside the component, declare a global variable just under the import statement and above the component declaration like this
import { Component } from '#angular/core';
declare const $: any;
#Component({
selector: 'tc-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
showModal(){
//caling jQuery method
$("#modalId").show();
}
}
I think it should be easy but I cannot find how.
I have something like
<html>
<head>
<title>{{'a' + 'b'}}</title>
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>
It seems like I cannot access anything outside my-app.
In angular 1.x it was easy, I was able to add ng-app on any element (<html ng-app="myApp">).
Now I think I'm able only bootstrap in body.
I know I can manually bootstrap somehow (didn't try yet), but dynamically change title in single page applications should be super-easy, shouldn't it?
Angular2 can't be bootstrapped to entire html. But you can use Title Service.
A service that can be used to get and set the title of a current HTML document.
It has 2 methods:
getTitle()
setTitle()
Don't forget to check the dependency injection section out to see how you can use the services.
EDIT:
As of the release (2.0.0), this is how you can do it:
import { Title } from '#angular/platform-browser';
export class SomeComponent {
constructor(title: Title) {
// title.getTitle();
// title.setTitle('new title');
}
}
And the docs for the Title service are now here: https://angular.io/docs/ts/latest/api/platform-browser/index/Title-class.html
I just started this HTML5 project where we decided to make it a single page architecture by leveraging jQuery $.load() method. Unfortunately, as soon as the JS started to grow, we quickly started running into issues where the modules loaded into the master dashboard have no knowledge of their parent.
The architecture looks like this:
dashboard.html (master file)
moduleA.html
moduleA.js
moduleB.html
moduleB.js
moduleC.html
moduleC.js
Since we decided to also keep the JS as separate files, we are having to load all JS files through dashboard.html in order to invoke them individually when modulex is loaded.
So when loading moduleA.html into the dashboard we have to call its corresponding JS. To do this we simply wrote the JS using a Module Pattern so we can easily invoke it by doing a function call, like:
<script>
moduleA
</script>
or this if we want to access a specific property of this member.
<script>
moduleA.someMethod();
</script>
Now, I know there are is gotta be a nicer way of doing this, right? I hate having to have script tags in the HTML modules in order to load its corresponding JS file.
Another limitation of this is the fact that we no longer can work on modules individually, since the scripts and CSS invocation happens on the parent (dashboard.html) so certainly when moduleA.html is loaded directly, it is pure HTML with no script or CSS.
I looked through the other questions but I didn't see anyone with the same problem.
I looked at AngularJS, EmberJS, KO.JS and BoilerPlateJS but none of them addresses what we are trying to accomplish. The only one that has a similar single page concept is jQuery Mobile but I don't know if you can switch from jQuery to jQuery Mobile and everything remains working.
Has anyone face this issue yet? Is there a solution or would I have to go with a custom solution.
Thanks!
I could argue about AngularJS with you. It is exactly what you need
dashboard.html is layout with some directives attached, but power lies in AngularJs if you use ng-view directive
here is example:
dashboard.js
var app = angular.module("modularApp",[]);
app.config(['$routeProvider', "$locationProvider", function routes($routeProvider, $locationProvider) {
$routeProvider.when('/dashboard', {
controller:'HomeCtrl',
templateUrl:'templates/home.html'
});
$routeProvider.when('/moduleA', {
controller:'ModuleACtrl',
templateUrl:'templates/moduleA.html'
});
$routeProvider.when('/moduleB', {
controller:'ModuleBCtrl',
templateUrl:'templates/moduleB.html'
});
$routeProvider.otherwise({redirectTo: "/dashboard"});
}]);
templates/dashboard.html
<html ng-app="modularApp">
<head>
<!--.... include angular minified js file and what else you need...-->
<script type="text/javascript" src="dashboard.js"></script>
<script type="text/javascript" src="moduleACtrl.js"></script>
<script type="text/javascript" src="moduleBCtrl.js"></script>
</head>
<body>
<a ng-href="#/moduleA">Open Module A View</a>
<a ng-href="#/moduleB">Open Module B View</a>
<!-- Add widgets header menus .... -->
<ng-view></ng-view>
</body>
</html>
moduleACtrl.js
var app=angular.module("modularApp");
app.controller("ModuleACtrl",function($scope){
$scope.scopeValue="Hellow from view";
});
moduleBCtrl.js
var app=angular.module("modularApp");
app.controller("ModuleBCtrl",function($scope){
$scope.scopeValue="Hellow from another view";
});
templates/moduleA.html
<div>{{scopeValue}} in module A</div>
templates/moduleB.html
<div>{{scopeValue}} in module B</div>
You can do more complex things with angular then just this. All depends on your needs. Do you have any special requirements :)
Also, you could create your own directive, like ng-view and use your own $route service and $routeProvider so you can add css and javascript you want to dynamically load when some rute match url.
so instead of above routing table, you could have
app.config(['$myRouteProvider', "$locationProvider", function routes($routeProvider, $locationProvider) {
$routeProvider.when('/dashboard', {
javascript:'javascript/dashboard.js',
templateUrl:'templates/dashboard.html',
cssfile: 'css/dashboard.css'
});
$routeProvider.when('/moduleA', {
javascript:'javascript/moduleA.js',
templateUrl:'templates/moduleA.html',
cssfile: 'css/moduleA.css'
});
$routeProvider.when('/moduleB', {
javascript:'javascript/moduleB.js',
templateUrl:'templates/moduleB.html',
cssfile: 'css/moduleB.css'
});
$routeProvider.otherwise({redirectTo: "/dashboard"});
}]);
But that is, pardon on my French, stup. There are couple libs I tried in ruby on rails to acheive similar, but backend is rendering content, or just part of content. But I'm not sure which backend you are using and are you interested to switch to rails anyway.
DomController in BoilerplateJS does what you need, without using any custom HTML attributes. Your dashboard.html can just have place holders where you want to inject your components. I'm just pulling out some html below from BoilerplateJS index.html to show how it works:
<body>
<section id="page-content">
<header>
<section class="theme"></section>
<section class="language"></section>
</header>
<aside>
<section class="main-menu"></section>
</aside>
</section>
</body>
theme, language and main-menu sections above are just place holders in to which relavant components would be injected by the DomController. The DomController can be now used to register the components with appropriate selectors as below:
//scoped DomController that will be effective only on $('#page-content')
var controller = new Boiler.DomController($('#page-content'));
//add routes with DOM node selector queries and relavant components
controller.addRoutes({
".main-menu" : new MainMenuRouteHandler(context),
".language" : new LanguageRouteHandler(context),
".theme" : new ThemeRouteHandler(context)
});
controller.start();
Above code is extracted from "/boilerplatejs/src/modules/baseModule/module.js"