{
  "$type": "site.standard.document",
  "canonicalUrl": "https://mhartington.io/post/angular-schematics-and-dynamic-content",
  "path": "/post/angular-schematics-and-dynamic-content",
  "publishedAt": "2018-05-08T22:07:00.000Z",
  "site": "at://did:plc:7kwylbxx56yro6aqz3oh5d2s/site.standard.publication/3mpgyj6haew2g",
  "textContent": "Recently, I've been diving into the new tooling setup being worked on for upcoming ionic/angular@4.0. Since we've moved all of our tooling over to the Angular CLI, we get to take advantage of new features, like Angular's Schematics. Schematics is a pipeline for building out new files/features in an app. What's even more impressive, is that schematics itself can be used in a non-angular project. In theory, you could have a Vue or P/React project, and it could also use schematics, though without some utility libs that exist for Angular.\n\nAdding routePath\n\nOne of the newest features we added to our page schematic was the ability to specify the path for the router config. For example, if you ran:\n\nWe'd generate a page for user, but also a route config that looks like:\n\nWith the new routePath option, we could run:\n\nAnd create a router config that looks like:\n\nThis is really nice for users who want to just start scaling their app right away.\n\nConditional templates\n\nWhile this was already a nice feature, I wanted to take it further by conditionally adding the correct imports and injecting ActivatedRoute if the user passed routePath.\n\nTo do this, I needed to look at the templating system used for schematics. Diving into the template core, it's loosely based on EJS, meaning we can do some standard if statements in our templates. Basically, we have a EJS template tag, <% %>, meaning anything inside of this tag can be evaluated as JavaScript. The most common place you see this is inside of class declarations when we want to transform the class name.\n\nSo for our conditional blocks, we can simply add\n\nSo for out import statement, we can add:\n\nAnd have this added if the user passes a routePath during the generate process.\n\nFinishing off the full component class, we ended up with:",
  "title": "Angular Schematics and Dynamic Content"
}