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
– Akash Agrawal, Commented Dec 18, 2017 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
– Aleksey Solovey, Commented Dec 18, 2017 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
– core114, Commented Dec 18, 2017 at 10:14
@core114 it's best for you to stick with JavaScript and avoid ES6 syntax for now — Aleksey Solovey
– Aleksey Solovey, Commented Dec 18, 2017 at 10:17

core114 · Accepted Answer · 2017-12-18 11:53:08Z

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, 2017 at 11:53

core114

5,33917 gold badges111 silver badges201 bronze badges

answered Dec 18, 2017 at 10:14

Akash Agrawal

2,2991 gold badge21 silver badges41 bronze badges

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

1 Comment

Akash Agrawal Over a year ago

welcome @core114, Happy Coding. Could you please accept my answer if it helped you.

mike_t · Accepted Answer · 2017-12-18 10:14:20Z

1

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() {
  }

}

answered Dec 18, 2017 at 10:14

mike_t

2,7312 gold badges24 silver badges43 bronze badges

Comments

core114 · Accepted Answer · 2017-12-18 10:21:50Z

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, 2017 at 10:21

core114

5,33917 gold badges111 silver badges201 bronze badges

answered Dec 18, 2017 at 10:15

Aref Zamani

2,0622 gold badges23 silver badges42 bronze badges

1 Comment

core114 Over a year ago

Sir,all of solutions are work for me, Im vote up all of you

Collectives™ on Stack Overflow

Angular js Current date display issue

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related