Angular js Current date display issue

Question

I'm a beginner in Angularjs and ng-bootstrap. I've created a sample Web site and added navigation for my site. It's working good, but I have some issue, I'm trying to display current date as 2017-12-18 this one is not displayed, I want to know how to added correctly to my site I'm following this Angularjs - display current date

app-navbar.component.html

       <div ng-app ng-controller="Ctrl">
          {{date | date:'yyyy-MM-dd'}}<br/>
        </div>

    <script>
  function Ctrl($scope)
   {
    $scope.date = new Date();
     }
    </script>

app-navbar.component.ts

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

    @Component({
      selector: 'app-navbar',
      templateUrl: './app-navbar.component.html',
      styleUrls: ['./app-navbar.component.css']
    })
    export class AppNavbarComponent implements OnInit {

      constructor() { }

      ngOnInit() {
      }

    }

are you sure what you want to do? you just cannot add script tags in html in Angular. — Akash Agrawal, Dec 18 '17 at 10:12
There is a misunderstanding between **Angular** and **AngularJS**. Can you clarify which one you want to use? Judging by the use of TypeScript you probably want to use Angular 2/4/5. But the examples you are looking at are for AngularJS (1 - 1.6) — Aleksey Solovey, Dec 18 '17 at 10:13
Sir , how t o added `app-navbar` to `controller`, Its should be fix, I Need to add controller, but i don't know wheres to added this controller — core114, Dec 18 '17 at 10:14
@core114 it's best for you to stick with JavaScript and avoid ES6 syntax for now — Aleksey Solovey, Dec 18 '17 at 10:17

score 1 · Answer 1 · answered Dec 18 '17 at 10:14

Remove script tags from your template, and update your component like this:

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

@Component({
  selector: 'app-navbar',
  templateUrl: './app-navbar.component.html',
  styleUrls: ['./app-navbar.component.css']
})
export class AppNavbarComponent implements OnInit {
  public date = new Date()
  constructor() { }

  ngOnInit() {
  }

}

score 1 · Accepted Answer · edited Dec 18 '17 at 11:53

1

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

    @Component({
      selector: 'app-navbar',
      templateUrl: './app-navbar.component.html',
      styleUrls: ['./app-navbar.component.css']
    })
    export class AppNavbarComponent implements OnInit {
      public date = new Date();
      constructor() { }

      ngOnInit() {
      }

    }

try this. For format refer: https://loiane.com/2017/08/angular-tips-formatting-dates-with-a-custom-date-pipe-dd-mm-yyyy/

edited Dec 18 '17 at 11:53

core114

5,155
16
92
189

answered Dec 18 '17 at 10:14

Akash Agrawal

2,219
1
17
38

1

welcome @core114, Happy Coding. Could you please accept my answer if it helped you. – Akash Agrawal Dec 18 '17 at 10:27

score 1 · Answer 3 · edited Dec 18 '17 at 10:21

1

you mixed angularjs by angular2 your app.component.ts

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

@Component({
  selector: 'app-navbar',
  templateUrl: './app-navbar.component.html',
  styleUrls: ['./app-navbar.component.css']
})
export class AppNavbarComponent implements OnInit {
  constructor() { }
  date = new Date();
  ngOnInit() {
  }

}

your app-navbar.component.html

 <div ng-app ng-controller="Ctrl">
          {{date | date:'yyyy-MM-dd'}}<br/>
        </div>

edited Dec 18 '17 at 10:21

core114

5,155
16
92
189

answered Dec 18 '17 at 10:15

Aref Zamani

2,023
2
20
40

Sir,all of solutions are work for me, Im vote up all of you – core114 Dec 18 '17 at 10:25

Angular js Current date display issue

3 Answers3