# ★ wrapOn()

## `Wrapper.prototype.wrapOn()`

The method wraps the given [`text`](#text-customtext) with the wrap, the [`opening`](https://wrapper.angular-package.dev/wrap/accessors/opening), and [`closing`](https://wrapper.angular-package.dev/wrap/accessors/closing) chars of the [`Wrapper`](https://wrapper.angular-package.dev/wrapper/overview) object.

{% code title="wrapper.class.ts" %}

```typescript
public wrapOn<CustomText extends string = ''>(
  text: CustomText
): Wrapped<Opening, CustomText, Closing> {
  return new Wrap(this.opening, this.closing, text).valueOf();
}
```

{% endcode %}

### Generic type variables

#### <mark style="color:green;">`CustomText`</mark>`extends`<mark style="color:green;">`string`</mark>`=`<mark style="color:green;">`''`</mark>

A generic type variable constrained by the [`string`](https://www.typescriptlang.org/docs/handbook/basic-types.html#string) indicates the captured type of the supplied [`text`](#text-customtext) parameter and the value of the generic type variable [`Text`](https://wrapper.angular-package.dev/type/wrapped#textextendsstring) in the  generic type [`Wrapped`](https://wrapper.angular-package.dev/type/wrapped) via [return type](#return-type), by default an empty [`string`](https://www.typescriptlang.org/docs/handbook/basic-types.html#string).

### Parameters

#### `text:`[<mark style="color:green;">`CustomText`</mark>](#customtextextendsstring)

The text of generic type variable [`CustomText`](#customtext-extends-string) to wrap by the [`opening`](https://wrapper.angular-package.dev/wrap/accessors#wrap.prototype.opening) and [`closing`](https://wrapper.angular-package.dev/wrap/accessors#wrap.prototype.closing) chars of the [`Wrapper`](https://wrapper.angular-package.dev/wrapper/overview) instance.

### Return type

#### `Wrapped<Opening, CustomText, Closing>`

The **return type** is generic type [`Wrapped`](https://wrapper.angular-package.dev/type/wrapped) that takes generic type variables [`Opening`](https://wrapper.angular-package.dev/generic-type-variables#wrap-opening), [`CustomText`](#customtextextendsstring) and [`Closing`](https://wrapper.angular-package.dev/generic-type-variables#wrap-closing).

### Returns

The **return value** is the given [`text`](#text-customtext) wrapped by the [`opening`](https://wrapper.angular-package.dev/wrap/accessors/opening) and [`closing`](https://wrapper.angular-package.dev/wrap/accessors/closing) chars of the [`Wrapper`](https://wrapper.angular-package.dev/wrapper) object of the generic type [`Wrapped`](https://wrapper.angular-package.dev/type/wrapped).

## Example usage

```typescript
// Example usage.
import { Wrapper } from '@angular-package/wrapper';

const longText = new Wrapper('{', '}', '{This is a long text}');

// Returns {{This is a long text}}.
longText.wrapOn('{This is a long text}');

// Returns <span color="red">.
new Wrapper('<', '>').wrapOn('span color="red"');
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://wrapper.angular-package.dev/wrapper/methods/instance/wrapon.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.