Skip to main content

Accessing Enum in template–Angular with Typescript

ng

By reading title of  this post, It  seems some what misleading. In Angular 2 (or higher version for that matter). We cannot directly access  Enum or any other type for that matter into template.

so, for an example  consider following example

now if we try to access Enum WeekDays in HTML template as follows

It would be resulted in runtime error shown below

AP1

To resolve this error we should be assigning enum to component property as shown below.

Reason behind this is , Component is the execution context for an Angular application. We can reference only those properties in template which are defined in component or have scope in component.

Comments

  1. UnknownMarch 20, 2018 at 3:28 PM

    Thanks for sharing this typescript concepts. Step by Step coding clearly explains coding. Keep up the good work and share more like this.
    Angularjs Training in Chennai | Angular 2 Training in Chennai

    ReplyDelete
  2. PoLApril 12, 2019 at 12:53 AM

    If you want to create a responsive HTML templates, then I think you will find these templates useful These are simple colorful graphic tools that will help make any report or presentation the most interesting for the audience. Try it.

    ReplyDelete
  3. UnknownApril 15, 2019 at 6:23 PM

    Informative and impressive blog.. Keep blogging..

    Excel Training in Chennai
    VBA Excel Macro Training in Chennai
    MOS Certification Training in Chennai

    ReplyDelete

Post a Comment

Popular posts from this blog

Array Extensions Library- Unit Test

Array Extensions Library- Unit Test This post is second in series of creating Array Extension Library  In this post we will learn how we can add unit test cases to our library. We will use Jasmine framework to Unit test our library. For that, use below command. >> npm install jasmine As we have developed our library in typescript, it will convenient to add typing for Jasmine as well. To install typing for Jasmine. Use below command. >> npm uninstall @types/jasmine   After running these commands, our package.config will look like Now, we will add new file named extension.spec.ts under test  directory. In this file we will import extension library first. We will now define one class named Heros,   Which we use to create Array  and test all our extension methods against it. Now we will describe our test suite using describe function provided by Jasmine. And initialize arrays with our primitive and custom type(Heros)   in beforeEach function provided by jasmine. Now, we will
Post a Comment
Read more

Visual Studio code - Setting up Tomcat server

  This is the second post in series of Setting up Visual Studio code for Java Spring Boot development. First post of this series can be found here . In this article we will see how we can configure VS Code to run Apache Tomcat server via extension. So lets begin. Open your VS Code and click on Extensions menu item. Now search for "Tomcat For Java". Select extension From Wei Shen and click install. Once this extension is installed. we can see new tab panel enabled in Explorer window. When we expand it, its empty. Now we need to configure Tomcat. For that, we need to download Apache Tomcat from official site. To download Tomcat click here to redirect to official site. There are multiple version available to download. For this demo we will download Tomcat Version 9.  Once Tomcat is downloaded to our machine. We now navigate back to VS code. We can now configure Tomcat by click on "+" sign on "Tomcat Servers" panel. When we click on Add Tomcat Server "
Post a Comment
Read more