Menu
I have a lot of components and the import section looks bloated:
import {comp1} from './components/comp1/comp1';
import {comp2} from './components/comp2/comp2';
....
Is there a way to write generic import? Something like
import * from './components/';
741
You can put commonly used directives, pipes, and components into one module and then import just that module wherever you need it in other parts of your application. Notice the following: It imports the CommonModule because the module's component needs common directives.
You can import MemberCardModule into AppModule directly. Or import into ShareModule and import ShareModule into AppModule. It is important to import Modules into AppModule. And then you can you MemberCardModule.
1. Using selector as HTML tag. This is widely used way to include child component in other components and you might be already aware of this way. In this selector of child component is used in the parent component i.e. app component in this case, as normal HTML tag.
if you want to insert HTML elements or other components in a component, then you do that using the concept of content projection. In Angular, you achieve content projection using < ng-content >< /ng-content >. You can make reusable components and scalable applications by properly using content projection.
All Angular components must have @Component decorator above the component class. The import statement gets the required feature from the Angular or other libraries. Import allows us to use exported members from external modules. For example, @Component decorator and OnInit interface are contained in @angular/core library.
To create a new component manually: Navigate to your Angular project directory. Create a new file, <component-name>.component.ts. At the top of the file, add the following import statement. After the import statement, add a @ Component decorator. Choose a CSS selector for the component.
I want to import all angular material modules and use into overall angular project templates. We can create a new module and import all material modules in the new module and use into our templates. Please use this command and run into Angular CLI: ng g m material --module=app
For Angular RC5 and RC6 you have to declare component in the module metadata decorator's declarations key, so add CoursesComponent in your main module declarations as below and remove directives from AppComponent metadata.
You can use import with * and use as keyword to create a variable to be used in your component. for example:
import * as jwt from 'angular2-jwt/angular2-jwt';
then in your component refer to it as following:
// ...
console.log(jwt.AuthConfig);
this is what index.ts file for.
I usually write a index.ts folder in that folder, and put everything you want into index file.
for example:
path/component/index.ts
export * from './child component 1/index';
export * from './child component 2/index';
export * from './child component 3/index';
export * from './child component 4/index';
export * from './child component 5/index';
...
some/component/*.component.ts
import * from 'path/component/index'
34
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
