how to display on html page in another html page in angular 4
I have used ngx-bootstrap
u can see below link
ngx-bootstrap
I can do this button and respective model are in same HTML page
still i can't figure out how to bind them if they are in different HTML pages.
import { Component, OnInit, TemplateRef} from '@angular/core';import { Router} from '@angular/router';import { BsModalService} from 'ngx-bootstrap/modal';import { BsModalRef} from 'ngx-bootstrap/modal/bs-modal-ref.service';@Component({ selector: 'app-application-dashboard', templateUrl: './application-dashboard.component.html', styleUrls: ['./application-dashboard.component.css']})export class ApplicationDashboardComponent implements OnInit { modalRef: BsModalRef;
constructor(private router: Router, private modalservice: BsModalService) {}
ngOnInit() {} createApp(template: TemplateRef < any > ) { this.modalRef = this.modalservice.show(template); }}
<button type="button" class="btn btn-default" (click)="createApp(template)" translate="">Create App</button><ng-template #template> <div class="modal-header"> <h2>Create a new app definition</h2> <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <p>You need to give a name for the new app definition and you may want to add a description at the same time.</p> <div class="form-group"> <label for="newAppName">App definition name</label> <input ng-disabled="model.loading" type="text" class="form-control ng-pristine ng-valid ng-touched" id="newAppName" ng-model="model.app.name" custom-keys="" enter-pressed="ok()" auto-focus=""> </div> <div class="form-group"> <label for="newAppKey">App definition key</label> <input ng-disabled="model.loading" type="text" class="form-control ng-pristine ng-untouched ng-valid" id="newAppKey" ng-model="model.app.key"> </div> <div class="form-group"> <label for="newAppDescription">Description</label> <textarea ng-disabled="model.loading" class="form-control ng-pristine ng-untouched ng-valid" id="newAppDescription" rows="5" ng-model="model.app.description"></textarea> </div> </div> <div class="modal-footer"> <div class="pull-right"> <button type="button" class="btn btn-sm btn-default ng-binding" ng-click="cancel()" ng-disabled="model.loading"> Cancel </button> <button type="button" class="btn btn-sm btn-default ng-binding" ng-click="ok()" ng-disabled="model.loading || !model.app.name || model.app.name.length == 0 || !model.app.key || model.app.key.length == 0" disabled="disabled"> Create new app definition </button> </div> <div class="loading pull-right ng-hide" ng-show="model.loading"> <div class="l1"></div> <div class="l2"></div> <div class="l2"></div> </div> </div></ng-template>
How to include html page in another page (angular)
The correct syntax for ng-include is this:
<div ng-include src="updateCompany.html"></div>
or
<ng-include src="updateCompany.html"></ng-include>
or
<ng-include src="'updateCompany.html'"></ng-include>
or
<div ng-include src="'updateCompany.html'"></div>
Hope it helps you
How do load an HTML file in the template of a component in Angular?
What you are looking out for is [innerHtml]
.You would need with something like this
<a [href]="repositoryURL"><fa size="2x" name="github"></fa></a>
<h3 id="project-header">{{ title }}</h3>
<p>
Technologies Used: {{ getTechnologiesList() }}
</p>
<div id="project-description">
<div [innerHtml]="yourHTML">
</div>
How to display a seperate html page without using a component for routing in angular 2?
I created a component for this page to post it through routing couldnot find an option to just display an HTML without component
How to insert one html page into another html page using custom directive in AngularJS?
you need to change template to templateUrl if you need to get the external html like as shown below.
templateUrl can also be a function which returns the URL of an HTML
template to be loaded and used for the directive. Angular will call
the templateUrl function with two parameters: the element that the
directive was called on, and an attr object associated with that
element.
Working Demo
fbModule.directive('fbLogin', function() {
return {
template: 'template.html'
};
});
to
fbModule.directive('fbLogin', function() {
return {
templateUrl: 'template.html'
};
});
Angular2 include html from server into a div
Angular security Blocks dynamic rendering of HTML and other scripts. You need to bypass them using DOM Sanitizer.
Read more here : Angular Security
DO below changes in your code :
// in your component.ts file
//import this
import { DomSanitizer } from '@angular/platform-browser';
// in constructor create object
constructor(
...
private sanitizer: DomSanitizer
...
){
}
someMethod(){
const headers = new HttpHeaders({
'Content-Type': 'text/plain',
});
const request = this.http.get<string>('https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form', {
headers: headers,
responseType: 'text'
}).subscribe(res => this.htmlString = res);
this.htmlData = this.sanitizer.bypassSecurityTrustHtml(this.htmlString); // this line bypasses angular security
}
and in HTML file ;
<!-- In Your html file-->
<div [innerHtml]="htmlData">
</div>
Here is the working example of your requirement :
Working Stackblitz Demo
Related Topics
Html - How to Scroll Vertical in Select Box
Select Country Dropdown in HTML Page
Item Moving Around When Window Resized
How to Make Vertical Lines Between List Items Using CSS
How to Embed Pdf File With Responsive Width
Why Not Use Tables For Layout in Html
Why Can't the ≪P≫ Tag Contain a ≪Div≫ Tag Inside It
Auto Detect Mobile Browser (Via User-Agent)
Why Aren't My Absolutely/Fixed-Positioned Elements Located Where I Expect
Error Error: Formcontrolname Must Be Used With a Parent Formgroup Directive
How to Prevent Flex-Items from Overflowing Flex Parent With No Wrap
How to Change Pressed Item Background Color in Ion-List on Ionic
How to Prevent a User from Entering Negative Values in HTML Input
Center One and Right/Left Align Other Flexbox Element