4:[[["$","script","0",{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@type\":\"LearningResource\",\"@id\":\"https://www.coddykit.com/courses/angular/custom-directives-253965\",\"name\":\"Custom Directives\",\"url\":\"https://www.coddykit.com/courses/angular/custom-directives-253965\",\"description\":\"Create and apply custom directives to enhance UI.\",\"learningResourceType\":\"Lesson\",\"educationalLevel\":\"Beginner to Advanced\",\"inLanguage\":\"en\",\"isAccessibleForFree\":true,\"isPartOf\":{\"@type\":\"Course\",\"name\":\"Angular Academy\",\"url\":\"https://www.coddykit.com/courses/angular\"},\"provider\":{\"@type\":\"Organization\",\"@id\":\"https://www.coddykit.com/#organization\",\"name\":\"CoddyKit\",\"url\":\"https://www.coddykit.com/\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https://www.coddykit.com/logo.png\"}}}"}}],["$","script","1",{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@type\":\"BreadcrumbList\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https://www.coddykit.com/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Courses\",\"item\":\"https://www.coddykit.com/courses\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Angular Academy\",\"item\":\"https://www.coddykit.com/courses/angular\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Custom Directives\",\"item\":\"https://www.coddykit.com/courses/angular/custom-directives-253965\"}]}"}}]],["$","article",null,{"className":"lsn-wrap","children":[["$","nav",null,{"className":"lsn-crumbs","aria-label":"Breadcrumb","children":[["$","a",null,{"href":"/","children":"Home"}],["$","span",null,{"children":"/"}],["$","a",null,{"href":"/courses","children":"Courses"}],["$","span",null,{"children":"/"}],["$","a",null,{"href":"/courses/angular","children":"Angular Academy"}],["$","span",null,{"children":"/"}],["$","span",null,{"className":"cur","children":"Custom Directives"}]]}],["$","header",null,{"className":"lsn-head","children":[["$","span",null,{"className":"lsn-eyebrow","children":["Angular Academy"," · Lesson"]}],["$","h1",null,{"className":"lsn-title","children":"Custom Directives"}],["$","p",null,{"className":"lsn-sub","children":"Create and apply custom directives to enhance UI."}]]}],["$","div",null,{"className":"lsn-body","children":[[["$","section","255193",{"className":"lsn-scene","children":[["$","h2",null,{"className":"lsn-scene-t","children":"1"}],["$","div",null,{"className":"cd-prose lsn-prose","dangerouslySetInnerHTML":{"__html":"

Custom Directives in Angular

Directives allow you to extend HTML. This lesson introduces custom directives and how you can create your own.

"}}],null,["$","img",null,{"className":"lsn-img","src":"scenes/1735222207071-welcome.png","alt":"Custom Directives — illustration 1","loading":"lazy"}]]}],["$","section","255194",{"className":"lsn-scene","children":[["$","h2",null,{"className":"lsn-scene-t","children":"2"}],["$","div",null,{"className":"cd-prose lsn-prose","dangerouslySetInnerHTML":{"__html":"

What is a Directive?

Directives change the appearance or behavior of DOM elements. Angular provides built-in directives like *ngIf and *ngFor.

"}}],null,null]}]],null]}],["$","aside",null,{"className":"lsn-gate","children":["$","div",null,{"className":"lsn-gate-card","children":[["$","div",null,{"className":"lsn-gate-ic","children":"🔒"}],["$","h2",null,{"children":"You've reached the end of the free preview"}],["$","p",null,{"children":"The first 2 pages of every lesson are free — the same on the web and in the app. Unlock the rest of this Angular Academy lesson, and the entire learning path, with CoddyKit PRO."}],["$","div",null,{"className":"lsn-gate-actions","children":[["$","a",null,{"className":"lsn-btn-primary","href":"/subscription/subscription","children":"Go PRO →"}],["$","a",null,{"className":"lsn-btn-ghost","href":"/onboarding/preparing","children":"Open in the app"}]]}]]}]}],["$","nav",null,{"className":"lsn-nav","aria-label":"Lesson navigation","children":[["$","span",null,{}],["$","a",null,{"className":"lsn-nav-link next","href":"/courses/angular/component-interaction-253966","children":[["$","span",null,{"children":"Next →"}],["$","strong",null,{"children":"Component Interaction"}]]}]]}],["$","section",null,{"className":"lsn-toc","children":[["$","h2",null,{"children":"All lessons in this course"}],["$","ol",null,{"children":[["$","li","253965",{"className":"cur","children":[["$","span",null,{"children":"Custom Directives"}],null]}],["$","li","253966",{"className":"","children":[["$","a",null,{"href":"/courses/angular/component-interaction-253966","children":"Component Interaction"}],null]}],["$","li","253967",{"className":"","children":[["$","a",null,{"href":"/courses/angular/dynamic-components-253967","children":"Dynamic Components"}],null]}]]}],["$","a",null,{"className":"lsn-back","href":"/courses/angular","children":["← Back to ","Angular Academy"]}]]}]]}]]