From the course: Angular Essential Training

Angular decorators - Angular Tutorial

From the course: Angular Essential Training

Start my 1-month free trial Buy for my team

Angular decorators

“

- [Instructor] Decorators are functions that return functions. They're not specific to the Angular framework, but they are a core piece of all Angular projects. You cannot use Angular without using decorators. Decorators in Angular supply metadata about a piece of code telling Angular what the code should do, and how it should inject that code into other parts of the application. Decorators are marked by placing an @ symbol in front of the decorator name. They're invoked at runtime, and expect arguments to be passed in either between the parentheses or immediately after the closing parentheses of the decorator. This is why semicolons are left off the end of the decorator expressions and why parentheses even empty ones, always follow the decorator's name. Common built-in decorators are NgModule to define modules. Component to define components. Injectable to define services. Pipe to define pipes. Directive to define directives, and input and output to define properties that send and receive data from the dom. We'll look at some of these decorators in detail later in this course. There are many built-in decorators available in Angular, and many properties on each decorator. I recommend reading Angular official documentation for more info on all the decorators, and how they work in Angular projects. Common decorator errors include missing parentheses, missing properties, missing values, and adding a semicolon at the end of the decorator statement. In older versions of Angular, decorator errors were hard to diagnose because Angular emitted errors to the console on execution and not a compile time. It's much easier to find issues in newer versions of Angular because of helpful feedback from the compiler. Use the ng build and ng serve commands that come with the Angular CLI tool to take advantage of the error reporting. Ng build compiles your code, and halts if there are errors. Ng serve compiles your code, reports errors, and watches for changes. Code editors like Visual Studio Code are also helpful because they can reason about your files, and give you real time feedback without compiling the code.

Contents