Example: <a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud

How to use custom templates? about angular-sh-weather HOT 1 OPEN

ceoaliongroo commented on August 17, 2024

How to use custom templates?

from angular-sh-weather.

Comments (1)

shusain commented on August 17, 2024

You can make use of ng-template to override the default template entirely or just add CSS to customize the styling. Note as is the icons shown are limited, feel free to modify and make pull requests if you want to change up which icons get shown. You could also use $templateCache.put('templates/basicWeatherDisplay.tpl.html', fileContentsAsStringHere);

<script type="text/ng-template" id="templates/basicWeatherDisplay.tpl.html">
<div class="row">
  <div class="col-xs-12">

    <weather-icon-google
      cloudiness="{{ weather.clouds }}"
      custom-size="customSize"
      ng-if="useGoogleImages">
    </weather-icon-google>

    <weather-icon
      cloudiness="{{ weather.clouds }}"
      custom-size="customSize"
      ng-if="!useGoogleImages">
    </weather-icon>

    <span style="display:inline-block; vertical-align:middle">
      <h3 ng-show="weather.temp.current">
        Current: <span ng-bind-html="weather.temp.current | temp:2"></span>
      </h3>

      min: <span ng-bind-html="weather.temp.min | temp"></span><br/>
      max: <span ng-bind-html="weather.temp.max | temp"></span><br/>

      <span ng-show="weather.rain">
        <h6>
          {{weather.rain}}% Chance of rain
        </h6>
      </span>

      <span ng-hide="weather.rain">
        <h6>
          No rain expected.
        </h6>
      </span>
    </span>
  </div>
</div>
</script>

from angular-sh-weather.

Recommend Projects