ng-content ਦੇ ਨਾਲ ਸਮੱਗਰੀ ਪ੍ਰੋਜੈਕਸ਼ਨ ਕੀ ਹੈ?

Question

Accepted Answer

**ਸਮੱਗਰੀ ਪ੍ਰੋਜੈਕਸ਼ਨ** ਇੱਕ ਕੰਪੋਨੈਂਟ ਨੂੰ **ਇਸ ਦੇ ਪੈਰੰਟ ਦੁਆਰਾ ਪਾਸ ਕੀਤੀ ਗਈ ਮਾਰਕਅਪ** ਨੂੰ ਸਵੀਕਾਰ ਕਰਨ ਅਤੇ ਰੈਂਡਰ ਕਰਨ ਦਿੰਦਾ ਹੈ — `` ਦੇ ਜ਼ਰੀਏ ਰੱਖਿਆ ਜਾਂਦਾ ਹੈ। ਇਹ ਲਚਕਦਾਰ, ਦੁਬਾਰਾ ਵਰਤੋਂ ਯੋਗ ਰੈਪਰ ਕੰਪੋਨੈਂਟਾਂ (ਕਾਰਡ, ਡਾਇਲਾਗ, ਲੇਆਊਟ) ਬਣਾਉਣ ਦਾ ਤਰੀਕਾ ਹੈ ਜਿਨ੍ਹਾਂ ਦੀ ਅੰਦਰੂਨੀ ਸਮੱਗਰੀ ਆਪਣ (consumer) ਦਾ ਨਿਯੰਤਰਣ ਕਰਦਾ ਹੈ। (ਇਹ Vue/web-component slots ਅਤੇ React ਦੇ `children` ਦੇ Angular ਦੇ ਬਰਾਬਰ ਹੈ।)) ## ਸਿੰਗਲ-ਸਲਾਟ ਪ੍ਰੋਜੈਕਸ਼ਨ ```ts // card.component.ts @Component({ selector: "app-card", template: `

`, }) export class CardComponent {} ``` ```html

Title

Any content I want!

``` ਕਾਰਡ ਸਟਾਈਲਾਂ ਨਾਲ ਲਬੇ ਨੂੰ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ; ਪੈਰੰਟ ਫ਼ੈਸਲਾ ਕਰਦਾ ਹੈ ਕਿ ਅੰਦਰ ਕੀ ਜਾਏ — `@Input` ਦੇ ਜ਼ਰੀਏ ਸਤਰਾਂ ਪਾਸ ਕਰਨ ਨਾਲੋਂ ਬਹੁਤ ਜ਼ਿਆਦਾ ਲਚਕਦਾਰ। ## `select` ਦੇ ਨਾਲ ਮਲਟੀ-ਸਲਾਟ ਪ੍ਰੋਜੈਕਸ਼ਨ ```ts @Component({ selector: "app-panel", template: `

`, }) export class PanelComponent {} ``` ```html

My Panel

Main body content

``` `select` ਐਟ੍ਰਿਬਿਊਟ (ਇੱਕ CSS ਸਿਲੈਕਟਰ — ਐਟ੍ਰਿਬਿਊਟ, ਕਲਾਸ, ਜਾਂ ਟੈਗ) ਹਰੇਕ ਪ੍ਰੋਜੈਕਟ ਕੀਤੀ ਜਾ ਰਹੀ ਸਮੱਗਰੀ ਨੂੰ ਸਹੀ `` ਸਲਾਟ ਤੱਕ ਰਸਾ ਦਿੰਦਾ ਹੈ, ਮਲਟੀ-ਖੇਤਰ ਲੇਆਊਟ ਨੂੰ ਸਮਰੱਥ ਬਣਾਉਂਦਾ ਹੈ। ## ਪ੍ਰੋਜੈਕਟ ਕੀਤੀ ਗਈ ਸਮੱਗਰੀ ਆਪਣਾ ਅਸਲ ਸੰਦਰਭ ਬਣਾਈ ਰੱਖਦੀ ਹੈ ```text Projected content is created in the PARENT's context — its bindings, methods, and lifecycle belong to the parent, not the wrapper component. ``` ## ਇਹ ਮਹੱਤਵਪੂਰਨ ਕਿਓਂ ਹੈ ਸਮੱਗਰੀ ਪ੍ਰੋਜੈਕਸ਼ਨ Angular ਵਿੱਚ **ਦੁਬਾਰਾ ਵਰਤੋਂ ਯੋਗ, ਰਚਨਾਤਮਕ** UI ਕੰਪੋਨੈਂਟਾਂ ਬਣਾਉਣ ਦੀ ਕੁੰਜੀ ਹੈ — ਕਾਰਡ, ਮੋਡਲ, ਟੈਬ, ਲੇਆਊਟ, ਅਤੇ ਕੋਈ ਵੀ "ਸ਼ੈਲ" ਜਿੱਥੇ ਕੰਜ਼ਿਊਮਰ ਅੰਦਰੂਨੀ ਸਮੱਗਰੀ ਫ਼ਰਾਹਮ ਕਰਦਾ ਹੈ। uਇਸ ਦੇ ਬਗੈਰ, ਕੰਪੋਨੈਂਟਾਂ ਕਠੋਰ ਹੋਣ (ਸਿਰਫ input ਕੇ ਮਾਧਿਅਮ ਦੁਆਰਾ ਸੰਰਚਿਤ); `` ਦੇ ਨਾਲ (ਅਤੇ ਬਹੁ-ਸਲਾਟ ਲਈ `select`), ਉਹ ਲਚਕਦਾਰ ਕੰਟੇਨਰ ਬਣ ਜਾਂਦੇ ਹਨ, ਜੋ design systems ਅਤੇ ਸਾਂਝੇ ਕੰਪੋਨੈਂਟ ਲਾਇਬ੍ਰੇਰੀਜ਼ ਲਈ ਜ਼ਰੂਰੀ ਹੈ।

ਸਿੰਗਲ-ਸਲਾਟ ਪ੍ਰੋਜੈਕਸ਼ਨ

select ਦੇ ਨਾਲ ਮਲਟੀ-ਸਲਾਟ ਪ੍ਰੋਜੈਕਸ਼ਨ

ਪ੍ਰੋਜੈਕਟ ਕੀਤੀ ਗਈ ਸਮੱਗਰੀ ਆਪਣਾ ਅਸਲ ਸੰਦਰਭ ਬਣਾਈ ਰੱਖਦੀ ਹੈ

ਇਹ ਮਹੱਤਵਪੂਰਨ ਕਿਓਂ ਹੈ

`select` ਦੇ ਨਾਲ ਮਲਟੀ-ਸਲਾਟ ਪ੍ਰੋਜੈਕਸ਼ਨ