I am referring to this Stackblitz Link to understand ViewContainerRef.
However, I want to create a component with proper HTML, .ts and CSS file. In the example, I am referring they have coded the HTML in .ts file itself but my Html is big so I want to keep it in a separate file.
If I have a separate .ts and HTML file then how can I call them using viewContainerRef.
I would highly appreciate if someone can point to a stackblitz example also.
If all you want to do is separate the files you can just use templateUrl in the Component.ts and put your template in that file.
#Component({
selector: 'dynamic-component',
templateUrl: './dynamic-component.html'
})
Related
In my Angular web project I use different two or three types of header in many pages in Angular 4 project. Is there a way to code up your HTML header code and footer code just once and have it included or injected in one or more of your pages. To give some clue I need an alternative for #Section in ASP.NET MVC Razor witch in each page we can add an extra code to it (I know this is a server side thing, but I need it in angular client side).
Is there an official/recommended way to do this?
You should create components for that. Something like:
#Component({
selector: 'myheader',
templateUrl: './header.component.html',
styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {
...
And then add it to the template of the other pages where you want to use it (or to the app.component.html if you want it everywhere). Something like:
<myheader></myheader>
If you need different data on the header depending on the component you are at, just create a HeaderService, and pass data to the header from the component through it.
The question is on the same lines as this one, however the other way around.
I want to embed an Angular 1.x app inside an Angular 2 app. More specifically this app. I understand that there are ways to upgrade elements individually, however this being a large project, I simply want to embed this in one of my tabs on the Angular 2 app.
I tried a very naive approach where I copied the dist folder in one of my components and I am trying to use the same index.html with
<div ng-app="app">
<div ng-view="">
</div></div>
Now I am trying to load all the minifed javascript (which includes angular 1.x library as well as some app specific javascript files and css) into my main angular 2 app in its own index.html . Then I load the index.html from the dist directory through my component. The problem seems that Angular 1 library doesnt seem to load.
I have a few questions;
Would it help if the libraries(js) files are loaded as ts. I assume that it is possible to load Angular 1 and 2 libraries simultaneously.
If it would, is there an easy way to get the js files converted to .ts files.
EDIT
I got this to work by using the angular.boostrap call as shown below.
Following is my code snippet for my component
import {Component, AfterViewInit, OnInit} from 'angular2/core';
declare var angular:any;
#Component({
selector: 'server-monitor',
templateUrl: 'app/components/server-monitor/dist/index.html',
styleUrls: ['app/components/server-monitor/dist/styles/vendor-c0a35f80.css',
'app/components/server-monitor/dist/styles/main-0c4cc0e5.css',
],
})
export class ServerMonitorComponent implements AfterViewInit, OnInit{
ngOnInit(){
angular.bootstrap(document, ['app']);
}
}
However, now I have run into a different problem. The original project makes a lot of http calls very frequently(2 sec by default) to get live stats about the system.
When I run this embedded into my app, I can see the calls are made but my page keeps refreshing and doesn't show anything on the graph. I understand I have to modify something where it makes the http calls, but no sure where.
In addition to the above edit, I modified $routeProvider in the original app and it seems to work just fine
I have a file structure like this :
/root
--/app
----app.ts
--/components
----/banner
------banner.ts
------banner.css
--index.html
I have import banner.ts inside app.ts like this
import {Banner} from '../components/banner/banner';
In banner.ts, I want to get the banner.css file so I write this:
import {Component} from 'angular2/core';
#Component({
selector: 'banner',
templateUrl: '../components/banner/banner.html',
styleUrls: ['../components/banner/banner.css']
})
This works, but when I change to this, it failed:
styleUrls: ['./banner.css']
I also try styleUrls: ['banner.css'], failed
Based on my understanding, the './' means in the same directory, but why I get an 404 error?
I am using the most updated Angular2
Yes, Only a proper relative file path will be recognized by Angular2 currently. The Path should actually start from the root like below to be safe, Again we are setting the guidelines from what is working and not working with the beta version, I am sure this is bound to change in the future. But for now, for beta0 the below code is the norm for referencing supplement files for the component.
import {Component} from 'angular2/core';
#Component({
selector: 'banner',
templateUrl: './app/components/banner/banner.html',
styleUrls: ['./app/components/banner/banner.css']
})
Checkout other large example as well, they all use this pattern.
A component inside a large Angular2 Sample
Hi I am happy to see this:
In visual studio 2015
open the banner.ts
open the solution explorer and expand the project
find the css file
right click the css file and drag to the banner.ts
you will find the reference on the top of the banner.ts
Hope it helps
I'm doing a angularjs blog tutorial, in the code example I see this new file type "tpl.html":
$routeProvider
.when('/', {
templateUrl: 'views/post-list.tpl.html',
controller: 'PostListController',
controllerAs: 'postlist'
})
.when('/post/:postId', {
templateUrl: 'views/post-detail.tpl.html',
controller: 'PostDetailController',
controllerAs: 'postdetail'
})
.when('/new', {
templateUrl: 'views/post-create.tpl.html',
controller: 'PostCreateController',
controllerAs: 'postcreate'
});
What is this file type? Is different to html files?
Theoretically, the "file type" is just a part of the file name. I can make a file called a.b.c.d.e.f.g.html and it is just as valid a file name as any other. But e.g. the modern OS's treat the stuff after the last period as the "file type", which helps in launching the right programs etc. So a a.tpl.html would be an HTML file just as any other. The .tpl is just something that helps to recognize what the file is used for.
Simply put, file names can contain more than one period, and it's still just a part of the name, nothing special there. And whatever comes after the very last period would be treated as the "file type".
It is just a little helper added by the author to mark these files as templates. This could be helpful when you see these files not in context - e.g. in the file system. You can name these html files how you like it! :)
The .tpl file extension is used by a template parser called Smarty. This is an HTML template parser.
Developers append .html to the end of the file so they can be recognized by text editors as HTML file and provide syntax checking, intellisense, and stuff.
So I have a website set up and I wish to dynamically load other .html files into a div. Each .html file contains some content but 1 .html file contains its own angularjs directives.
I was using ng-bind-html along with $scope.content = $sce.trustAsHtml(data); but I have discovered that this prints out the html raw (does not process any angular directives).
I've tried to use the various solutions on stack overflow but none have worked for me.
Website: http://algorithmictrading.azurewebsites.net/
App.js: http://algorithmictrading.azurewebsites.net/js/app.js
Example of .html pages being loaded:
http://algorithmictrading.azurewebsites.net/includes/home.html
http://algorithmictrading.azurewebsites.net/includes/about_us.html
.html page that contains angular directives:
http://algorithmictrading.azurewebsites.net/includes/download.html
As you can see, if you navigate to the website and click on the 'download' tab, the content is loaded but the angular in the drop down menu is not handled. The test button I added should also produce an alert box.
Right now, the code is based off this thread:
call function inside $sce.trustAsHtml() string in Angular js
Thanks!
I found that angular was stripping out the directives from html strings if I didn't pass them through the $sce.trustAsHtml method before passing them into the template:
$sce.trustAsHtml('<a href="/some-link" directive-example>link to add</a>');
This combined with a watch/compile on the element's content you're inserting html into seems to do the trick:
scope.$watch(getStringValue, function() {
$compile(element, null, -9999)(scope);
});
Take a look at this example: http://plnkr.co/edit/VyZmQVnRqfIkdrYgBA1R?p=preview.
Had the same problem this week and the best way I found to make it works was creating a custom directive called "BindComponent".
Change the ng-bind-html directive to a custom directive, and inside the link method you put this:
element.html(markupModel);
$compile(element.contents())(scope);
The markupModel can be a string with html code or you can use $templateCache($templateCache docs) to get the code from a .html file.