How to Display on HTML Page in Another HTML Page in Angular 4

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



Leave a reply



Submit