Angular 2: Multiple html lines of code(template) not rendering in browser

Question

I have a block of HTML code as my template in my app.component.html file. This code refused to render on the browser. But when I replace the entire content of that file with shorter lines of code, the browser displays that. By shorter lines of code, I mean something like
<h1>Hello there</h1> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>.

Below is my code: app.component.html

<div class="locator">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <header class="inner-page-header landing-page-header">
          <span>Welcome to</span>
          <h1 class="start">Food</h1>
          <p>Daily new menus of breakfast, lunch, evening snacks and dinner; prepared by expert chefs.</p>
          <p>
          </p>
        </header>
        <div class="holder landing-page-form">
          <form accept-charset="UTF-8" action="/localities/set_locality"
                class="location-form col-xs-12 col-sm-6 col-sm-offset-3" data-remote="true" id="zip_form"
                method="get">
            <div style="display:none">
              <input name="utf8" type="hidden" value="✓">
            </div>
            <p>SELECT LOCATION </p>
            <hr class="small-line">
            <div id="locationField">
              <input class="form-control" id="autocomplete" placeholder="Enter your address"
                     onFocus="geolocate()" type="text"></input>
            </div>
            <div class=" text-center">
              <button id="singlebutton" name="findfood" class="btn btn-lg btn-space btn-primary">Find food</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

app.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {

}

index.html:

......
  <div class="page-content">

    <app-root>Loading...</app-root>

  </div>
.......

All I see as output is: Loading

What am I missing?

Your app is not loading. The cause is impossible to diagnose without more info. Check the browser console for error messages and edit them into your post. — The Head Rush
– The Head Rush, Commented Dec 20, 2016 at 12:33
data-remote="true" and onFocus="geolocate()" can give errors. check console logs — Alex Kojin
– Alex Kojin, Commented Dec 20, 2016 at 12:42

AVJT82 · Accepted Answer · 2016-12-20 13:07:30Z

1

<input class="form-control" id="autocomplete" placeholder="Enter your address"
                 onFocus="geolocate()" type="text"></input> <!-- error here -->

Remove </input>

After that it renders, at least for me.

EDIT. Check the dev tools in browser, it tells where the error is!

edited Dec 20, 2016 at 13:07

answered Dec 20, 2016 at 12:44

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

AVJT82 Over a year ago

@calistus Great! Well, check my post again, added picture. Check the dev tools in browser, it shows errors. So here the error is pointed out. Makes your life so much easier! :)

AVJT82 Over a year ago

@calistus No problem, glad I could help! :) Please accept answer, so that no other people need to look at this question since it's solved! :)

Ashok Shah · Accepted Answer · 2016-12-20 12:43:38Z

0

you missed to define the function in class. Define geolocate method in class. it should fix your problem

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
    geolocate() {
    }
}

answered Dec 20, 2016 at 12:43

Ashok Shah

95614 silver badges41 bronze badges

2 Comments

Ilo Calistus Over a year ago

I have that defined in an external JS file and I called this file in my index.html

Ashok Shah Over a year ago

you need to utilize that function here.

Collectives™ on Stack Overflow

Angular 2: Multiple html lines of code(template) not rendering in browser

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related