An import statement declares that a JavaScript or TypeScript file depends on features from another module. Declarations in a file are not available to other files by default: they must first be exported, then imported where they are used. section 4.5.1
Importing a data model
A to-do list class can use `import { TodoItem } from "./todoItem";` to access the exported `TodoItem` class. Its component can then import both `TodoItem` and `TodoList` to create sample data for a template. section 2.3.1 section 2.3.3
Read the statement from left to right:
- The names in `{ ... }` identify the exported features needed by the current file. Separate multiple names with commas. section 4.5.1
- The name after `from` identifies the module. A path beginning `./` is relative to the current file; `@angular/core` names an Angular package module. section 2.3.3
- The module name omits the file extension. Angular’s build tools resolve the dependency and include required code in the JavaScript bundle sent to the browser. section 2.3.3 section 4.5.1
Listing 4.29. Importing specific types in the main.ts file in the src folder
import { Name, WeatherLocation } from "./modules/NameAndWeather";
let name = new Name("Adam", "Freeman");
let loc = new WeatherLocation("raining", "London");
console.log(name.nameMessage);
console.log(loc.weatherMessage);
The complete `main.ts` example imports two exported classes from one module, creates an instance of each, and logs their messages. section 4.5.1
Importing an Angular component brings its class into scope, but does not by itself enable that component in the application. The component is also added to an Angular module’s `declarations` array, and a matching host element is placed in a template. section 16.2.1
