When present, this directive/component is ignored by the AOT compiler.
It remains in distributed code, and the JIT compiler attempts to compile it
at run time, in the browser.
To ensure the correct behavior, the app must import @angular/compiler.
Angular directives marked as standalone do not need to be declared in an NgModule. Such
directives don't depend on any "intermediate context" of an NgModule (ex. configured
providers).
Standalone directives that should be applied to the host whenever the directive is matched.
By default, none of the inputs or outputs of the host directives will be available on the host,
unless they are specified in the inputs or outputs properties.
Angular automatically updates input properties during change detection.
The inputs property accepts either strings or object literals that configure the directive
properties that should be exposed as inputs.
When an object literal is passed in, the name property indicates which property on the
class the input should write to, while the alias determines the name under
which the input will be available in template bindings. The required property indicates that
the input is required which will trigger a compile-time error if it isn't passed in when the
directive is used.
When a string is passed into the inputs array, it can have a format of 'name' or
'name: alias' where name is the property on the class that the directive should write
to, while the alias determines the name under which the input will be available in
template bindings. String-based input definitions are assumed to be optional.
The following example creates a component with two data-bound properties.
Maps class properties to host element bindings for properties,
attributes, and events, using a set of key-value pairs.
host?:{[key: string]: string;}
Angular automatically checks host property bindings during change detection.
If a binding changes, Angular updates the directive's host element.
When the key is a property of the host element, the property value is
propagated to the specified DOM property.
When the key is a static attribute in the DOM, the attribute value
is propagated to the specified property in the host element.
For event handling:
The key is the DOM event that the directive listens to.
To listen to global events, add the target to the event name.
The target can be window, document or body.
The value is the statement to execute when the event occurs. If the
statement evaluates to false, then preventDefault is applied on the DOM
event. A handler method can refer to the $event local variable.
When present, this directive/component is ignored by the AOT compiler.
It remains in distributed code, and the JIT compiler attempts to compile it
at run time, in the browser.
To ensure the correct behavior, the app must import @angular/compiler.
Angular directives marked as standalone do not need to be declared in an NgModule. Such
directives don't depend on any "intermediate context" of an NgModule (ex. configured
providers).
standalone?: boolean
More information about standalone components, directives, and pipes can be found in this
guide.
Standalone directives that should be applied to the host whenever the directive is matched.
By default, none of the inputs or outputs of the host directives will be available on the host,
unless they are specified in the inputs or outputs properties.
You can additionally alias inputs and outputs by putting a colon and the alias after the
original input or output name. For example, if a directive applied via hostDirectives
defines an input named menuDisabled, you can alias this to disabled by adding
'menuDisabled: disabled' as an entry to inputs.
When marking a directive as standalone, please make sure that the directive is not already
declared in an NgModule.
Declaring a directive in an NgModule
Another approach is to declare a directive in an NgModule:
@Directive({
selector:'my-directive',})classMyDirective{}@NgModule({
declarations:[MyDirective,SomeComponent],
exports:[MyDirective],// making it available outside of this module})classSomeNgModule{}
When declaring a directive in an NgModule, please make sure that:
the directive is declared in exactly one NgModule.
the directive is not standalone.
you do not re-declare a directive imported from another module.
the directive is included into the exports field as well if you want this directive to be
accessible for components outside of the NgModule.